CSS垂直居中的解决方法

来源：懂视网责编：小采时间：2020-11-27 18:50:19

CSS垂直居中的解决方法

CSS垂直居中的解决方法: 在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。多年以来，垂直居中已经

推荐度：

点击下载本文 文档为doc格式

导读CSS垂直居中的解决方法: 在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。多年以来，垂直居中已经

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

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

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

2）从理论上来看，它似乎极其简单。

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

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

一、代码初始化

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

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

基本样式如下：

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

二、基于绝对定位的解决方法

如果我们想要利用绝对定位的方法进行垂直剧中的话，那么就要求元素具有固定的宽度和高度，如果没有固定的宽度和高度就无法实现，因为需要利用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)来说，百分比都是以其父元素的尺寸为基准进行解析的。

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

　假设我们不想使用绝对定位，仍然可以采用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。

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