实现水平居中的方法

已知高度宽度元素的水平垂直居中

方法一:绝对定位与负边距实现

利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。核心CSS代码如下：
<style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 100px; border: 1px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top:-50px; } </style>

方法二：绝对定位与margin

这种方法也是利用绝对定位与margin，但是无需知道被垂直居中元素的高和宽
#container{ 2 position:relative; 3 } 4 5 #center{ 6 position:absolute; 7 margin:auto; 8 top:0; 9 bottom:0; 10 left:0; 11 right:0; 12 }

方法三：flex布局

Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。
<style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 100px; border: 1px solid #000; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top:-50px; } </style>

---

未知高度和宽度元素的水平垂直居中

方法一：当要被居中的元素是inline或者inline-block元素

当要被居中的元素是inline或者inline-block的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
#container{ display:table-cell; text-align:center; vertical-align:middle; }
#center{ }

方法二：Css3

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
#container{ position:relative; }

#center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

方法三：flex轻松解决

#container{ display:flex; justify-content:center; align-items: center; }
#center{ }

浏览器对最新版本的flexbox 的支持情况如下：
•Chrome 29+
•Firefox 28+
•Internet Explorer 11+
•Opera 17+
•Safari 6.1+ (prefixed with -webkit-)
•Android 4.4+
•iOS 7.1+ (prefixed with -webkit-)