水平居中和垂直居中在写静态页面时常用的css样式，下面总结一下关于水平和垂直居中，希望对给位朋友有所帮助。（如有遗漏不足请发留言补充谢谢~）
1. 块元素的水平居中：在有固定宽度时加上margin{0 auto;}
QQ截图20161128153756.jpg
2. 文本居中：把text-algin：center;属性加在块元素上，使其内文本居中。
QQ截图20161128154326.jpg
demo
3.块元素垂直居中：
(1)使用定位
QQ截图20161128155918.jpg
demo
(2)使用上下margin(作用在子元素)或padding（作用在父元素）
QQ截图20161128160550.jpg
demo
QQ截图20161128163050.jpg
4. 文本垂直居中：
(1)使用line-height:另行高line-height等于外层容器高度height
QQ截图20161128163904.jpg
demo
(2)设置上下padding（作用在子元素）
QQ截图20161128164620.jpg
[demo](http://js.jirengu.com/kute/1/edit?html,output）
5. 利用定位做蒙版 让蒙版水平垂直居中。
QQ截图20161128172129.jpg
6. 图像垂直水平居中
(1)用display:table-cell;
QQ截图20161128180052.jpg
demo
(2)在内层容器内加一个空元素；
QQ截图20161128180517.jpg
demo
文章有所不足支出希望朋友指出 谢谢~~
版权归饥人谷_楠柒所有如有转载请注明出处~~
网友评论