解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）

时间 2019-12-17

标签解决 css 垂直居中几种方法基于绝对定位单位 flexbox 栏目 CSS 繁體版

原文原文链接

在CSS中对元素进行水平居中是很是简单的：若是它是一个行内元素，就对它的父元素应用 text-align: center ;若是它是一个块级元素，就对它自身应用 margin: auto。然而若是要对一个元素进行垂直居中，可能光是想一想就使人头皮发麻了。前端

　　多年以来，垂直居中已经成为了CSS领域的圣杯，它一样也是前端开发圈内广为流传的笑话。缘由在于它同时具有如下几条特征：浏览器

1）它是极其常见的需求。函数

2）从理论上来看，它彷佛极其简单。flex

3）在实践中，它每每难如登天，当涉及尺寸不固定的元素时尤为如此。spa

接下来咱们具体说明一下这三个方法的简单使用。设计

1、代码初始化code

　咱们基于以下这段HTML代码，将id='content'的div元素在id='box'的div张垂直居中。orm

<body>  
<div id="box">  
    <div id="content">这是要居中的元素</div>  
</div>  
</body>

基本样式以下：blog

#box{  
     margin:0;  
     padding:0;  
     width:500px;  
     height:500px;  
     background: #4AC291;  
     font-size:100%;  
     position: relative;  
}  
#content{  
     background: #655;  
     color: white;  
     text-align: center;  
     line-height: 2em;  
}

2、基于绝对定位的解决方法开发

若是咱们想要利用绝对定位的方法进行垂直剧中的话，那么就要求元素具备固定的宽度和高度，若是没有固定的宽度和高度就没法实现，由于须要利用top和left的值，进行定位。

#box{  
    margin:0;  
    padding:0;  
    width:500px;  
    height:500px;  
    background: #4AC291;  
    font-size:100%;  
    position: relative;    //必须的，由于下面的div要根据这个进行定位  
}  
#content{  
    background: #655;  
    color: white;  
    text-align: center;  
    line-height: 2em;  
    position: absolute;   //设置绝对定位  
    top:50%;  
    left:50%;  
    width:12em;  
    height:2em;  
    margin-top:-1em;    //    2/2=1  
    margin-left:-6em;   //    12/2=6

如上图所示，是固定宽高的样式效果。

　　这段代码在本质上作了这样几件事情：先把这个元素的左上角放置在视口(或最近的、具备定位属性的祖先元素)的正中心，而后再利用负外边距把它向左、向上移动(移动距离至关于它自身宽高的一半)，从而把元素的正中心放置在视口的正中心。借助强大的 calc() 函数，这段代码还能够省掉两行声明：

 #box{  
      margin:0;  
      padding:0;  
      width:500px;  
      height:500px;  
      background: #4AC291;  
      font-size:100%;  
      position: relative;  
  }  
  #content{  
      background: #655;  
      color: white;  
      text-align: center;  
      line-height: 2em;  
    /*position: absolute; 
      top:50%; 
      left:50%; 
      width:12em; 
      height:2em; 
      margin-top:-1em; 
      margin-left:-6em;*/  
      position: absolute;  
      width: 12em;  
      height: 2em;  
      top: calc(50% - 1em);  
      left: calc(50% - 6em);  
}

这个方法最大的局限在于它要求元素的宽高是固定的。在一般状况下，对那些须要居中的元素来讲，其尺寸每每是由其内容来决定的。若是能找到一个属性的百分比值以元素自身的宽高做为解析基准，那咱们的难题就迎刃而解了!遗憾的是，对于绝大多数CSS属性(包括 margin)来讲，百分比都是以其父元素的尺寸为基准进行解析的。

3、基于视口单位的解决方法

　假设咱们不想使用绝对定位，仍然能够采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;可是在缺乏left和top的状况下，如何把这个元素的左上角放置的容器的正中心呢?

　咱们的第一反应极可能是用margin属性的百分比值来实现，就像这样：

#content {  
  width: 12em;  
  margin: 50% auto 0;  
  transform: translateY(-50%);  
}

　这段代码产生的效果十分离谱。缘由在于margin的百分比值时以父元素的宽度做为解析基准的。没错，即便对于margin-top和margin-bottom来讲也是这样!

　　不过幸运的是，若是只是想把元素相对于视口进行居中，仍然是有但愿的。CSS值与单位(第三版)定义了一套新的单位，称为视口相关的长度单位。

1) vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示视口宽度的 1%，而不是 100%。

2) 与 vw 相似，1vh 表示视口高度的 1%。

3) 当视口宽度小于高度时，1vmin 等于 1vw，不然等于 1vh。

4) 当视口宽度大于高度时，1vmax 等于 1vw，不然等于 1vh。

5、绝对定位结合translate()方法 (不肯定宽高的状况下)

使用绝对定位将top和left设置为50%,再将元素自己使用translate分别沿着x和y轴移动-50%,此方法能够在不知道div宽高的状况下实现垂直居中;

#content {  
  width: 12em;  
  position:absoulte;
  top:50%;
  left:50%;
  transform: translateY(-50%,-50%);  
}

5、Flexbox方法（本文主要说明的方法）

Flexbox(伸缩盒)是专门针对这类需求所设计的。咱们之因此要讨论其余方案，仅仅是由于那些方案在浏览器的支持程度上稍微好一些而已。其实目前现代浏览器对 Flexbox 的支持度已经至关不错了。

　　咱们只需写两行声明便可：先给这个待居中元素的父元素设置 display: flex(在这个例子中是元素)，再给这个元素自身设置咱们再熟悉不过的margin: auto。

#box{  
     display: flex;  
     min-height:50vh;  
     margin:0;  
     width:500px;  
     height:500px;  
     background: #4AC291;  
 }  
 #content{  
     margin:auto;  
     background: #655;  
     color: white;  
 }

若是浏览器不支持Flexbox，页面渲染结果看起来就跟咱们的起点图是同样的了(若是设置了宽度的话)。虽然没有垂直居中效果，但也是彻底能够接受的。

　　Flexbo 的另外一个好处在于，它还能够将匿名容器(即没有被标签包裹的文本节点)垂直居中。