css垂直水平居中解決方案

寫在前面：

垂直水平居中即垂直與水平方向上都要居中，也就是視覺效果中的，處於視圖的正中間。下面，咱們來說講幾個css中經常使用的垂直水平居中的解決方案

方法1:

一、把外層的div的顯示方式設置爲table，即display: table;

二、把內層的div的顯示方式設置爲table-ceil，即display: table-ceil;

這樣一來，咱們就能夠把這格html結構當作表格和表格中的一個小格。因爲表格中只有一個ceil，因此它會自動撐開整個表格，給它設置寬高是無效的，它的寬高是wrapper的寬高。ceil中的內容content就能夠自動垂直居中了。

其中：

• 垂直居中： 利用vertical-align: middle;
• 水平居中： 利用text-align: center;

具體代碼以下：

<div class="wrapper">
   <div class="ceil">
     <div class="content">Hello world!</div>
   </div>
 </div>

css代碼：

.wrapper {
      display: table;
      width: 400px;
      height: 200px;
      background-color: red;
   }
   .ceil {
      display: table-cell;
      vertical-align: middle;
      background-color: blue;
      text-align: center;
   }

效果以下：

接着咱們把content中的內容加長看看效果：

從上面能夠看到，wrapper原本應該是紅色背景的，可是如今整個ceil撐開了整個表格，因此把wrapper的背景覆蓋了，呈現出藍色。

優勢：

• content 能夠動態改變高度(不需在 CSS 中定義)。當 wrapper 裏沒有足夠空間時，content不會被截斷，也就是說content會自動撐開wrapper

缺點：

• 實現起來比較繁瑣，須要額外嵌套的標籤。

方法2：

絕對定位法。
一、咱們把須要垂直水平居中的position設置爲absolute。
二、設置top爲0， left爲0，margin爲寬高一半的負值。即把盒先一種偏中間的地方，而後再進行微調：

<div class="container">
  <div class="content">Hello World!</div>
</div>

.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: blue;
   top: 50%;
   left: 50%;
   margin-top: -50px;  // 高的一半，視實際狀況而定
   margin-left: -50px;  // 寬的一半，視實際狀況而定
}

注意：絕對定位absolute，是相對於最近非static的祖先元素進行定位的，因此咱們要在其相對定位的元素上定義display屬性。

一樣當文字溢出的時候：

優勢：

• 適用於全部瀏覽器
• 不須要嵌套標籤

缺點：

• 因爲高度是限定好的，沒有足夠空間時，content會溢出，這時咱們能夠設置：overflow:auto; 這時當溢出的時候就會出現滾動條。

方法3:

在方法2的基礎上進行改動，把margin負值改成transform和 translate

.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   background-color: blue;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

優勢，不須要定義寬高，靈活性高

缺點：仍要注意截斷問題

方法4:

這個方法使用了 position:absolute，有固定寬度和高度的 div。這個 div 被設置爲 top:0; bottom:0;。可是由於它有固定高度，其實並不能和上下都間距爲 0，所以 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。

<div class="content"> Content here</div>

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}

優勢：

• 簡單

缺點：

• IE(IE8 beta)中無效
• 無足夠空間時，content 被截斷，可是不會有滾動條出現

方法5:

最經常使用的單行文本居中
這個方法只能將單行文本居中。
一、把 line-height設置爲那個對象的 height 值使文本垂直居中
二、把 text-align 設置爲center，使文本水平居中

<div id="content">Hello world!</div>

.content {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

優勢：

• 適用於全部瀏覽器
• 無足夠空間時不會被截斷

缺點：

• 只對文本有效(塊級元素無效)
• 多行時，斷詞比較糟糕

這個方法在小元素上很是有用，例如使按鈕文本或者單行文本居中。

方法6:

完美居中方案 —— flex佈局

.parent{
    display : flex;
    width : 300px;
    height : 300px;
    background-color : red;
}
.child{
    width : 100px;
    height : 50px;
    margin : auto;
    background-color: green;
}

關鍵點：
一、 display：flex；
二、 margin：auto；

參考資料：
css實現垂直居中的5種方法