對css居中的一點總結

在學習前端的過程當中，發現元素和文本的水平居中和垂直居中，是常常會出現的問題，在實際工做中也會常常碰到。居中的技巧有不少，但在編寫代碼的過程當中，發現有時候技巧管用，有時候無論用，因而就將每一個知道的方案都試一遍，找到合適的。這種狀況究其緣由是對居中的認識不夠深刻，只是停留在實現需求的水平上。爲了更好的加深對居中的理解，蒐集和閱讀相關資料，發現不錯的文章將其整理出來。原文參考：https://css-tricks.com/center...

居中是什麼

居中故名思意就是將物體放置在其容器的中間，在css中居中就是指元素、文本、圖片等相對其容器或父元素或瀏覽器窗口可以居中顯示。而根據顯示方式的不一樣，又分爲水平居中，垂直居中，水平垂直居中。下面就分狀況對居中進行討論。

水平居中

水平居中咱們常見的一種解決方案就是設置text-align:center，然而咱們會發現這種方式有時候有效，有時候卻沒有效果。這是由於咱們在使用相關方法的時候並無對塊級元素和行內元素進行區分，不一樣類型的元素其居中方法是不一樣的：

當元素爲行內元素時(如文本，連接)

當須要居中的元素爲行內元素時，你能夠經過在其父元素（必須是塊級元素）設置以下css樣式：

.parent {
     text-align:center;
}

示例代碼
這種方法對display設置爲inline、inline-block、inline-table、inline-flex的元素都有效。

塊級元素居中

對於一個塊級元素你能夠經過設置其margin屬性，來達到水平居中的效果。你能夠將其margin-left和margin-right設置爲auto：

.center{
    margin:0 auto;
}

這樣瀏覽器就會根據元素的寬度自動爲元素左右兩邊設定等寬的margin，來達到水平居中的效果。這裏須要注意的是元素須要設定width屬性，不然元素的寬度會自動充滿父元素，就不存在相對父元素水平居中一說了。
示例代碼
這裏須要注意的是這種方法對設置float屬性的塊級元素是沒有效果的，浮動元素的居中這裏有一個解決方案，可是該方法的佈局比較混亂，子元素脫出父元素，並不推薦。
另外有一個tricks，可以實現以下圖中

文字環繞圖片居中的效果，具體參見這篇文章。

當有多個塊級元素時

當你須要對多個塊級元素進行居中顯示時，若是塊級元素以下垂直排列：

，那麼簡單的設置margin:0 auto;就能夠輕鬆實現。
但若是以下排列：

那麼就可使用display:inline-block將多個塊元素單行顯示，同時因爲inline的緣故，能夠在父元素設置text-align:center將多個塊元素居中，固然也能夠將元素設置爲display:flex; justify-content: center;達到居中效果。詳細代碼示例

垂直居中

垂直居中相比於水平居中，就複雜一些，仍是分塊級與行內進行討論。

inline或inline-block元素

單行垂直居中的狀況

當父元素沒有設定寬度，而是根據內容自適應時，簡單的設置padding就能夠達到垂直居中的效果，如：

css:
.p{ border: 1px solid yellow;padding: 80px;}
.p a{
            background-color: black;
            color: white;
            border: 2px solid red;
            padding: 30px;  /*相同的上下內距實現垂直居中*/
        }
html:
<div class="p">
        <a href="#">asldkjflkadfk</a>
</div>

在某些狀況下設置padding並不能知足需求，而你又須要將一段單行顯示的文本居中，這時你能夠將line-height和height屬性設置爲等高來達到目的：

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;
}

示例代碼
關於line-height，有許多須要瞭解和注意的地方，想詳細瞭解爲何這麼這種方法能夠實現垂直居中，能夠參見這篇文章

多行垂直居中

設置padding一樣可使多行文本居中，但有時當文本出如今表格單元格里或其餘狀況也會使該方法無效。這時會用到vertical-align屬性，
示例代碼
更多關於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;
}

完整示例

塊級元素垂直居中

當你知道元素的高度時

若是你知道元素的高度，那麼你能夠這樣實現垂直居中：

.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%)實現一樣的效果*/
}

上述代碼是經過定位的方式，來實現垂直居中，子元素參照父元素進行絕對定位，相對於父元素的上邊緣向下移動50%（父元素高度的50%），而後經過margin-top元素將子元素向上拉自身的50%，達到最終的居中。
完整示例代碼

當元素的高度未知時

當元素高度未知時能夠以下，本質原理與上述類似：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

完整代碼

使用flexbox

使用flexbox無疑是種簡單有效的解決方案：

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

完整代碼

既水平居中又垂直居中

你能夠將上述方法進行合理的組合，來達到水平垂直居中，總結一下，可分爲以下三種狀況：

元素是否具備固定的寬高

在經過將元素定位50%/50%後，再設置一個高度和寬度一半大小的負值給 margin，可以很好的居中，而且支持大多數瀏覽器：

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

完整代碼

當寬高未知時

當你不知道寬高時，你可使用transform屬性，設置translate(-50%)，這裏的50%是相對與元素自己的寬高。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

完整代碼

使用flexbox

想要水平垂直居中，你須要設置兩個居中屬性

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

完整代碼

相關文章：
https://css-tricks.com/float-...

http://www.zhangxinxu.com/wor...

居中代碼生成工具：http://howtocenterincss.com/