水平居中和垂直居中在写静态页面时常用的css样式，下面总结一下关于水平和垂直居中，希望对给位朋友有所帮助。（如有遗漏不足请发留言补充谢谢~）

1. 块元素的水平居中：在有固定宽度时加上margin{0 auto;}

QQ截图20161128153756.jpg

demo

2. 文本居中：把text-algin：center;属性加在块元素上，使其内文本居中。

QQ截图20161128154326.jpg

3.块元素垂直居中：

(1)使用定位

QQ截图20161128155918.jpg

(2)使用上下margin(作用在子元素)或padding（作用在父元素）

QQ截图20161128160550.jpg

QQ截图20161128163050.jpg

demo

4. 文本垂直居中：

(1)使用line-height:另行高line-height等于外层容器高度height

QQ截图20161128163904.jpg

(2)设置上下padding（作用在子元素）

QQ截图20161128164620.jpg

[demo](http://js.jirengu.com/kute/1/edit?html,output）

5. 利用定位做蒙版 让蒙版水平垂直居中。

QQ截图20161128172129.jpg

demo

6. 图像垂直水平居中

(1)用display:table-cell;

QQ截图20161128180052.jpg

(2)在内层容器内加一个空元素；

QQ截图20161128180517.jpg

文章有所不足支出希望朋友指出  谢谢~~
版权归饥人谷_楠柒所有如有转载请注明出处~~