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种方式的，兼容性好，适应性好，各位小伙伴还有没有其余的实现方式呢？