在學習前端的過程中，發(fā)現(xiàn)元素和文本的水平居中和垂直居中，是經(jīng)常會出現(xiàn)的問題，在實際工作中也會經(jīng)常碰到。居中的技巧有很多，原以為自己掌握了這些技巧就行了，但在編寫代碼的過程中，發(fā)現(xiàn)有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現(xiàn)需求的水平上。為了更好的加深對居中的理解，搜集和閱讀相關(guān)資料，并將所得總結(jié)在此。
居中是什么
居中故名思意就是將物體放置在其容器的中間，在css中居中就是指元素、文本、圖片等相對其容器或父元素或瀏覽器窗口能夠居中顯示。而根據(jù)顯示方式的不同，又分為水平居中，垂直居中，水平垂直居中。下面就分情況對居中進行討論。
水平居中
水平居中我們常見的一種解決方案就是設(shè)置text-align:center，然而我們會發(fā)現(xiàn)這種方式有時候有效，有時候卻沒有效果。這是因為我們在使用相關(guān)方法的時候并沒有對塊級元素和行內(nèi)元素進行區(qū)分，不同類型的元素其居中方法是不同的：
當元素為行內(nèi)元素時(如文本，鏈接)
當需要居中的元素為行內(nèi)元素時，你可以通過在其父元素（必須是塊級元素）設(shè)置如下css樣式：
.parent {
text-align:center;
}
示例代碼
這種方法對display設(shè)置為inline、inline-block、inline-table、inline-flex的元素都有效。
塊級元素居中
對于一個塊級元素你可以通過設(shè)置其margin屬性，來達到水平居中的效果。你可以將其margin-left和margin-right設(shè)置為auto：
.center{
margin:0 auto;
}
這樣瀏覽器就會根據(jù)元素的寬度自動為元素左右兩邊設(shè)定等寬的margin，來達到水平居中的效果。這里需要注意的是元素需要設(shè)定width屬性，否則元素的寬度會自動充滿父元素，就不存在相對父元素水平居中一說了。
示例代碼
這里需要注意的是這種方法對設(shè)置float屬性的塊級元素是沒有效果的，浮動元素的居中這里有一個解決方案，但是該方法的布局比較混亂，子元素脫出父元素，并不推薦。
另外有一個tricks，能夠?qū)崿F(xiàn)如下圖中
當有多個塊級元素時
當你需要對多個塊級元素進行居中顯示時，如果塊級元素如下垂直排列：
margin:0 auto;就可以輕松實現(xiàn)。但如果如下排列：
那么就可以使用
display:inline-block將多個塊元素單行顯示，同時由于inline的緣故，可以在父元素設(shè)置text-align:center將多個塊元素居中，當然也可以將元素設(shè)置為display:flex; justify-content: center;達到居中效果。詳細代碼示例
垂直居中
垂直居中相比于水平居中，就復雜一些，還是分塊級與行內(nèi)進行討論。
inline或inline-block元素
單行垂直居中的情況
當父元素沒有設(shè)定寬度，而是根據(jù)內(nèi)容自適應時，簡單的設(shè)置padding就可以達到垂直居中的效果，如：
css:
.p{ border: 1px solid yellow;padding: 80px;}
.p a{
background-color: black;
color: white;
border: 2px solid red;
padding: 30px; /*相同的上下內(nèi)距實現(xiàn)垂直居中*/
}
html:
<div class="p">
<a href="#">asldkjflkadfk</a>
</div>
在某些情況下設(shè)置padding并不能滿足需求，而你又需要將一段單行顯示的文本居中，這時你可以將line-height和height屬性設(shè)置為等高來達到目的：
html:
<main><div>I'm a centered line.</div></main>
css:
main {
background: white;
margin: 20px 0;
padding: 40px;
}
main div {
background: black;
color: white;
height: 100px; /*行高與line-height相同*/
line-height: 100px;
padding: 20px;
width: 50%;
white-space: nowrap;
}
示例代碼
關(guān)于line-height，有許多需要了解和注意的地方，想詳細了解為什么這么這種方法可以實現(xiàn)垂直居中，可以參見這篇文章
多行垂直居中
設(shè)置padding同樣可以使多行文本居中，但有時當文本出現(xiàn)在表格單元格里或其他情況也會使該方法無效。這時會用到vertical-align屬性，
示例代碼
更多關(guān)于vertical—align的信息，可以點擊這里和這篇
需要指出的是只有一個元素屬于inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用
如果table—like不行，也許你可以試一下flex-parent, 一個flex-child可以很輕易的在flex-parent里垂直居中：
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
示例代碼
需要注意的是父容器必須有一個固定的高度。
如果上述2中方法都不可行，你就需要借助偽元素，也就是在父容器里添加一個高度占滿整個父元素的偽元素，文本就居中顯示在里面。
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
塊級元素垂直居中
當你知道元素的高度時
如果你知道元素的高度，那么你可以這樣實現(xiàn)垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ /*這里可以使用transform：translate(-50%)實現(xiàn)同樣的效果*/
}
上述代碼是通過定位的方式，來實現(xiàn)垂直居中，子元素參照父元素進行絕對定位，相對于父元素的上邊緣向下移動50%（父元素高度的50%），然后通過margin-top元素將子元素向上拉自身的50%，達到最終的居中。
完整示例代碼
當元素的高度未知時
當元素高度未知時可以如下，本質(zhì)原理與上述相似：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
使用flexbox
使用flexbox無疑是種簡單有效的解決方案：
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
既水平居中又垂直居中
你可以將上述方法進行合理的組合，來達到水平垂直居中，總結(jié)一下，可分為如下三種情況：
元素是否具有固定的寬高
在通過將元素定位50%/50%后，再設(shè)置一個高度和寬度一半大小的負值給 margin，能夠很好的居中，并且支持大多數(shù)瀏覽器：
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
當寬高未知時
當你不知道寬高時，你可以使用transform屬性，設(shè)置translate(-50%)，這里的50%是相對與元素本身的寬高。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
使用flexbox
想要水平垂直居中，你需要設(shè)置兩個居中屬性
.parent {
display: flex;
justify-content: center;
align-items: center;
}
原文鏈接：
https://css-tricks.com/centering-css-complete-guide/
相關(guān)文章：
https://css-tricks.com/float-center/
居中代碼生成工具：http://howtocenterincss.com/
