水平居中

行內(nèi)或類行內(nèi)元素（比如文本和鏈接）

在塊級(jí)父容器中讓行內(nèi)元素居中，只需使用text-align: center;

這種方法可以讓inline/inline-block/inline-table/inline/flex

塊級(jí)元素

讓塊級(jí)元素居中的方法就是設(shè)置margin-left和margin-right為auto

多個(gè)塊級(jí)元素

如果要讓多個(gè)塊級(jí)元素在同一水平線上居中，那么可以修改它們的display值。這里有兩個(gè)示例，其中一個(gè)使用了inline-block的顯示方式，另一個(gè)使用了flexbox的顯示方式。

垂直居中

行內(nèi)或類行內(nèi)元素（比如文本和鏈接）
單行
對(duì)于單行行內(nèi)或者文本元素，只需為它們添加等值的padding-top和padding-bottom就可以實(shí)現(xiàn)垂直居中。
如果因?yàn)槟承┰蛭覀儾荒苁褂胮adding
屬性來實(shí)現(xiàn)垂直居中，而且已知文本不會(huì)換行，那么就可以讓line-height和center相等，從而實(shí)現(xiàn)垂直居中。

多行
對(duì)于多行文本，同樣可以使用等值padding-to和padding-bottom的方式實(shí)現(xiàn)垂直居中。如果你在使用過程中發(fā)現(xiàn)這種方法沒見效，那么你可以通過 CSS 為文本設(shè)置一個(gè)類似table-cell的父級(jí)容器，然后使用 [vertical-align]:middle。此外，你還可以使用 flexbox 實(shí)現(xiàn)垂直居中。

上述方法只適用于父級(jí)容器擁有確定高度的元素。
如果上述方法都不起作用，那么你就需要使用被稱為幽靈元素（ghost element）的非常規(guī)解決方式：在垂直居中的元素上添加偽元素，設(shè)置偽元素的高等于父級(jí)容器的高，然后為文本添加vertical-align: middle;樣式，即可實(shí)現(xiàn)垂直居中。

寬高固定元素

設(shè)定父級(jí)容器為相對(duì)定位的容器，設(shè)定子元素絕對(duì)定位的位置position: absolute; top: 50%; left: 50%
，最后使用負(fù)向margin實(shí)現(xiàn)水平和垂直居中，margin的值為寬高（具體的寬高需要根據(jù)實(shí)際情況計(jì)算padding）的一半。

寬高不固定元素

如果無法獲取確定的寬高，同樣需要設(shè)定父級(jí)容器為相對(duì)定位的容器，設(shè)定子元素絕對(duì)定位的位置position: absolute; top: 50%; left: 50%。不同的是，接下來需要使用transform: translate(-50%, -50%);；

浮動(dòng)實(shí)現(xiàn)水平居中的方法

沒有浮動(dòng)的div：大家都知道div是一個(gè)塊元素，其默認(rèn)的寬度就是100%，如圖所示：

如果div設(shè)置了浮動(dòng)之后，他的內(nèi)容有多寬度就會(huì)撐開有多大的容器（除顯式設(shè)置元素寬度值之外），這也是我們實(shí)現(xiàn)讓分頁導(dǎo)航居中的關(guān)鍵所在

接下來使用傳統(tǒng)的制作方法，我們會(huì)讓導(dǎo)航浮動(dòng)到左邊，而且每個(gè)分頁項(xiàng)也進(jìn)行浮動(dòng)，就如下圖所示一樣：

現(xiàn)在要想的辦法是讓分頁導(dǎo)航居中的效果了，在這里是通過“position:relative”屬性實(shí)現(xiàn)，首先在列表項(xiàng)“ul”上向右移動(dòng)50%（left:50%;），看到如下圖所示：

如上圖所示一樣，整個(gè)分頁向右移動(dòng)了50%的距離，緊接著我們?cè)凇發(fā)i”上也定義“position:relative”屬性，但其移動(dòng)的方向和列表“ul”移動(dòng)的方向剛好是反方向，而其移動(dòng)的值保持一致：