网页元素居中的多种方法

一 水平居中

1 行内元素水平居中

2 inline-block 元素水平居中

3 块状元素水平居中

二 垂直居中

1 行内元素，inline-block元素水平居中

2 块状元素垂直居中

 一 水平居中

1 行内元素水平居中

a) text-align:center;

适用：文字

2 inline-block元素

a) text-align: center

适用于button, input, select等inline-block元素。

 

3 块状元素水平居中

a) margin-left: auto; margin-right: auto; 设定宽高。

 

二 垂直居中

1 行内，inline-block元素垂直居中

a) height, line-height法

设置块状元素的height, line-height相同，里面的行内，inline-block元素就会垂直居中。

原理：我理解的是段落展示的时候，设置的line-height文字会在font-size的基础上上下留出相同的距离(（line-height)-(font-size）/2)，这样才能达到美观的效果，保证每行间隙一致。

2 块状元素垂直居中