css中元素垂直居中的n种方法

元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法，并且按照实现的时间线，从css2到css3的各种解决方案，从代码量有少到多的排序来一一说明每种布局方法的实现方式，通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。

使用line-height实现单行文本垂直居中

line-height：用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

.box-1{
    height: 50px;
    line-height: 50px;
}

<div class="box box-1">
    这是要垂直居中的内容。
</div>

查看案例： https://codepen.io/qwguo88/full/dyYvBQv

使用inline-block元素和vertical-align特性实现垂直居中

此方法不限制元素的宽高，兼容性好

1. vertical-align：用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

<div class="box">
    <div class="content">
        这是要垂直居中的内容。
    </div>
</div>

.box{
  text-align: center;
  letter-spacing: -.3em;
}
.box::before{
  content: '';
  height: 100%;
  width: 1px;
  margin-right: -1px;
  display:inline-block;
  vertical-align: middle;
}
.content{
  display:inline-block;
  vertical-align: middle;
  letter-spacing: normal;
}

查看案例： https://codepen.io/qwguo88/full/KKdmvdj

上面的案例通过利用display:inline-block的高度100%于父级高度，再利用vertical-aling:middle垂直居中属性，让行内块级元素剧中与父级。在元素设置成行内块级元素的时候代码中如果元素后边有空格，可以通过设置父级元素letter-spacing:-.3em，然后在通过居中元素还原文字间隔，或者通过设置父级的font-size:0;也可以取消空格的间距。其中红色竖线是通过父元素的伪类设置的。

使用表格单元格和vertical-align特性实现垂直居中

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>

.box{
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}
.content{
  display:inline-block;
}

此方法需要设置父级的父级为diaplay:table;，并且设置父元素：display:table-cell，然后在设置vertical-align:middle，实现元素居中，但是此方法子元素需要是行内元素，和行内块级元素;

查看案例： https://codepen.io/qwguo88/full/qBOmPaM

使用绝对定位absolute和margin负值

此方法用于固定宽高的元素，或者通过js获取不固定元素宽高

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>

.box{
  position: relative;
}
.content{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
}

此方法需要设置元素依照父级绝对定位，left和top都按照父元素50%定位。且需要知道要居中元素的宽高，也可以通过javascript获取元素的宽高，并且设置margin的上和左为负值元素宽高的一半；

使用绝对定位absolute和margin:auto

此方法需要设置居中元素为固定宽高

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>

.box{
  position: relative;
}
.content{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

此方法利用margin: auto;居中特性加决定定位上下左右为0来实现元素居中，此方法需要固定元素的宽高，并且决对定位于父元素。兼容ie8以上浏览器.

使用绝对定位absolute和css3的transform:translate属性

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>

.box{
  position: relative;
}
.content{
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%, -50%);
}

此方法利用了css3的新特性元素偏移属性，先让元素绝对定位于父元素的右、上的50%，然后通过transform:translate(-50%, -50%);设置元素按照自身的右上便宜50%实现居中，此方法不用的优点：不用固定元素宽高，缺点：兼容需要支持css3的浏览器。

案例说明： https://codepen.io/qwguo88/full/jObmLaN

使用flex实现居中

通过flex弹性布局有好多种方式可以居中对齐，可以给父级单独设置，或者父级子级结合设置实现

html代码结构完全一样：

<div class="box">
    <div class="content">
      这是要垂直居中的内容。
    </div>
</div>

方法1：

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

最简单的方法，只通过父级设置，把父元素设置成弹性很模型，然后设置父元素的子元素横向纵向居中显示。

方法2：

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

也是只通过父级设置，把父元素设置成弹性很模型，然后设置父元素的子元素横向居中显示，然后通过弹性很模型的子元素组align-content:center对齐方式，配合flex-wrap:wrap实现。

方法3：

.box{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.box:before{
    content: '';
    flex-grow: .5;
}

这个也只只给父级设置，不同的是这个需要借助父级的伪元素；先把父元素设置成弹性很模型，然后设置纵向排列，然后设置横轴左右居中，然后再借助父元素伪类，设置纵向占据父元素的.5大小，实现上下居中。

方法4：

.box{
    display: flex;
}
.content{
    margin: auto;
}

把父元素设置成弹性很模型，然后通过要居中的子元素设置margin:auto，元素外间距依照父级自适应外间距。

方法5：

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

把父元素设置成弹性很模型，然后子元素设置align-self: content。

查看案例： https://codepen.io/qwguo88/full/ZEbKgXG

使用grid网格布局实现居中

通过css的最新布局形式grid网格布局，也有多种方式，网格布局也可以给父级单独设置，或者父级子级结合设置实现

html代码结构完全一样：

<div class="box">
    <div class="content">
      这是要垂直居中的内容。
    </div>
</div>

方法1：

.box{
    display: grid;
    place-content: center;
}

方法2：

.box{
    display: grid;
    place-items: center;
}

方法3：

.box{
    display: grid;
    justify-content: center;
    align-content: center;
}

方法4：

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

方法5：

.box{
    display: grid;
}
.content{
    margin: auto;
}

方法6：

.box{
    display: grid;
    justify-content: center;
}
.content{
    align-self: center;
}

查看案例： https://codepen.io/qwguo88/full/PoPmJbo

使用calc()计算函数实现

此方法需要固定高度

<div class="box">
    <div class="content">
      这是要垂直居中的内容。
    </div>
</div>

.content{
    margin: auto;
    position: relative;
    width: 300px;
    height: 100px;
    top: calc((100% - 100px)/ 2);
}

首先设置固定宽高，利用margin:auto左右居中，然后通过relative定位top通过calc()函数计算，使用父级的100% 减去元素自身高度然后除以2，也就是总高度减去元素高度计算后的一半值，如果元素设置了边线和内边距需要相应的减掉。

使用设置文字排布方向属性writing-mode实现

<div class="box">
    <div class="box-inner">
        <div class="content">
          这是要垂直居中的内容。
        </div>
    </div>
</div>

.box{
    writing-mode: tb-lr;
    writing-mode: vertical-lr;
    text-align: center;
}
.box-inner{
    width: 100%;
    display: inline-block;
    writing-mode: lr;
    writing-mode: horizontal-tb;
}
.content{
    display: inline-block;
    text-align: left;
}

这个方法相对来说复杂一些，需要多加一个标签，首先给最外层改变排布方向为垂直排布，然后设置垂直居中；然后在里边一层再把排布方向设置回来，并且设置为行内块级元素宽度100%；最后让居中的元素设置成行内块级元素，文字对齐设置成左对齐实现。

查看案例： https://codepen.io/qwguo88/full/GRpmMjV