css垂直居中的n种方法

我们在做页面布局的时候经常会有上下左右居中的设计，由于大部分的页面结构都是左右式排版页面是固定宽度的，而元素是自上而下排列，高度不固定。所以在页面中css实现左右居中比较容易，垂直居中就不太好实现了。
在css3之前我们前端技术人员要实现垂直居中布局往往需要绞尽脑汁的去解决各种浏览器兼容问题，而随着时间的推移，ie浏览器已经退出历史舞台，现在的浏览器已经完全支持css3的各种布局方式，在css3中实现居中布局已经变得非常容易

元素垂直居中的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