css 垂直居中方法彙總

查看原文能夠有更好的排版效果哦

前言

居中是平時工做中的最多見的一種需求，各類圖片居中或者各類彈窗，水平居中還好，特別是垂直居中，不少初學者表示太難寫了，如今列舉一些經常使用的方法。

實戰

這裏只講述css相關的方法，js暫時不提，畢竟這是樣式上的事情，就不勞煩js出手了。

1. top 50% ;margin-top:-自身高度/2

記得最先工做的時候學到的第一個方法就是，top給50%，而後把自身向上移動自身高度的一半，具體實現是

<style>
.content{
  position:relative; 
  width:500px; 
  height:400px; 
  border:1px solid black; 
}
.box{ 
  positon:absolute; 
  width:200px; 
  height:200px; 
  background:orange; 
  top:50%; 
  margin-top:-100px; 
}
</style>

<div class="content">
  <div class="box"></div>
</div>

這樣就很容易實現了垂直居中，但這種必需要知道自身的高度，才能使用margin-top:-100px這種來達到目的。

優勢: 寫法簡單，兼容性好

缺點: 必須知道目標元素的高度，並且高度必須是固定的值，不然樣式要跟着相應的改動，不夠靈活

2. top 50% ; transforms:translateY(-50%)

這個方法和上述原理一致，只不過向上位移換成了transforms:translateY寫法

.box{
  positon:absolute; 
  width:200px; 
  height:200px; 
  background:orange; 
  top:50%; 
  transforms:translateY(-50%) 
}

因爲用到了css3的新特性，因此對瀏覽器的要求就比較高了

優勢: 寫法簡單，適應性好

缺點: 兼容性通常，不支持ie8瀏覽器

3. margin:auto

你們平時可能都用過margin:0 auto來實現一個div水平居中吧，其實也是能夠作垂直居中的。

.box{
  positon:absolute; 
  width:200px; 
  height:200px; /**必需要指明寬高**/
  background:orange; 
  top:0;
  bottom:0; 
  margin:auto
}

是否是很神奇？可是有個地方要注意的是，這個必需要指明寬高，否則的話top:0;bottom:0就把容器撐滿了。

優勢: 寫法簡單，適應性好，兼容性好

缺點: 須要指明元素寬高，若是目標元素寬高是變化的，你能夠經過js來輔助生成

4. vertical-align:middle

這個方法是我最喜歡用的一個方法，基本知足上述的所有要求，主要用到了多個元素vertical-align:middle實現垂直居中，因爲須要多個元素才能生效（否則一個元素跟誰對齊呢），因此再添加一個i標籤

<style>
.box{
  display:inline-block;/**必須是inline-block類型**/
  width:200px; 
  height:200px; 
  background:orange; 
  vertical-align:middle;
}
.m{
  display:inline-block;/**必須是inline-block類型**/
  width:0;
  height:100%;
  vertical-align:middle;
}
</style>

<div class="content">
  <i class="m"></i>
  <div class="box"></div>
</div>

這樣就實現垂直居中，並且不須要關注目標元素的尺寸，適應性強

一般我在用的時候用用一個僞元素來代替，避免在html中新增結構

<style>
/**單獨用一個類名錶示，可做爲公共樣式**/
.mfix{
  font-size:0;/**消除空隙**/
}
.mfix:before{
  content:'';
  display:inline-block;
  width:0;
  height:100%;
  vertical-align:middle;
}
.mfix>*{
  display:inline-block;
  vertical-align:middle;
}

.box{
  width:200px; 
  height:200px; 
  background:orange; 
  vertical-align:middle;
}
</style>

<div class="content mfix"> <!--添加一個mfix類名-->
  <div class="box"></div>
</div>

這樣在須要垂直居中的父級上添加一個.mfix就能夠實現垂直居中了。

優勢: 適應性好，兼容性好

缺點: 可能稍微有點複雜吧。

5. writing-mode

這個方法是在張鑫旭的博客中發現的，也挺有意思。

正常狀況下好比text-align:center，inline-block元素能夠實現水平居中，假設咱們經過writing-mode將水平流改爲豎直流，不就造成垂直居中了嗎？

在父級上加上以下樣式

.content{
  writing-mode: tb-rl; /**內容從上往下(top-bottom)，從右往左(right-left)垂直流動，下面是一些兼容性寫法**/
  -webkit-writing-mode: vertical-rl;      
  writing-mode: vertical-rl;
  text-align: center;
}

這樣也能夠作到垂直居中，不過要注意的是，如今裏面的文本也會變成從上到下排列，因此須要重置一下。

還有一個問題就是，若是這個時候要想水平居中就gg了，原理和剛纔反過來，能夠經過套一層改變流向來解決，具體實現能夠參考demo

優勢: 適應性好，兼容性好

缺點: 算是一個偏方吧。並且writing-mode的語法太雜，各類各樣的，因此。。玩玩就好

6. flex大法

這個方法接觸過css3的應該都接觸過吧，只要在父級加上以下代碼就能實現垂直居中了

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

若是對瀏覽器沒什麼要求，儘可能都用這種方式吧。

優勢: 寫法簡單，適應性好

缺點: 兼容性通常，不支持ie8瀏覽器

小節

以上共有6種方式來實現垂直居中的效果，我的是最青睞第4種方式的，兼容性好，適應性好，各位小夥伴還有沒有其餘的實現方式呢？