實現水平居中的方法

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

方法一:絕對定位與負邊距實現

利用絕對定位，將元素的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-)