水平居中
行內(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)的值保持一致：
