CSS实现垂直居中的十五种方法

情景一：单行文字垂直居中

1、line-height

原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置

<div class="text-con">单行文字垂直居中</div><style>.text-con {width: 200px;height:  60px;line-height: 60px;color: #fff;background: #000;text-align: center;}</style>

情景二：多行文字垂直居中

1、absolute + margin负值

定位设置top：50%来抓取空间高度的50%，然后将居中元素的margin-top设置为负一半的高度

<h3>absolute + margin负值</h3><div class="box"><div class="content">absolute + margin负值多行文本垂直居中<a>absolute + margin负值多行文本垂直居中</a>absolute + margin负值多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;position: relative;}.content {width: 400px;background: #ccc;height: 70px;position: absolute;top: 50%;left: 50%;margin-left: -200px;margin-top: -35px;}</style>

2、absolute + margin auto

当元素设置为绝对定位后，假设它是抓取不到整体可运用的空间范围，所以margin:auto会失效，但是当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这是你的margin:auto;就生效了。此方法的缺点是定位元素必须有固定的宽高（百分比也可）才能正常居中

<h3>absolute + margin auto</h3><div class="box"><div class="content">absolute + margin auto 多行文本垂直居中<a>absolute + margin auto 多行文本垂直居中</a>absolute + margin auto 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;position: relative;}.content {width: 400px;height: 70px;background: #ccc;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</style>

3、absolute + translate

此居中的定位元素不需要固定的宽高，我们利用绝对定位的top和left设置元素跟上方和左方各为50%，再利用translate(-50%, -50%)位移居中元素自身的宽和高的50%来达到居中；不设置宽高时会自动充满

<h3>absolute + translate</h3><div class="box"><div class="content">absolute + translate 多行文本垂直居中<a>absolute + translate 多行文本垂直居中</a>absolute + translate 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;position: relative;}.content {background: #ccc;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>

4、flex + align-items

只要设定父层display:flex以及设定次轴属性align-items:center就好了，有点事不需要设置高度就可以自动居中，代码简单

<h3>flex + align-items</h3><div class="box"><div class="content">flex + align-items 多行文本垂直居中<a>flex + align-items 多行文本垂直居中</a>flex + align-items 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: flex;justify-content: center;align-items: center;}.content {width: 400px;background: #ccc;}</style>

5、flex + auto

父层元素设置display:flex，里层元素设置margin:auto就可实现垂直居中

<h3>flex + margin:auto</h3><div class="box"><div class="content">flex + margin:auto 多行文本垂直居中<a>flex + margin:auto 多行文本垂直居中</a>flex + margin:auto 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: flex;}.content {width: 400px;background: #ccc;margin: auto;}</style>

6、grid + template

把模板设置成三列，就能搞定垂直居中了

<h3>grid + template</h3><div class="box"><div class="content">grid + template 多行文本垂直居中<a>grid + template 多行文本垂直居中</a>grid + template 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: grid;grid-template-rows: 1fr auto 1fr;grid-template-columns: 1fr auto 1fr;grid-template-areas:'. . .''. amos .''. . .';}.content {width: 400px;background: #ccc;grid-area: amos;}</style>

7、grid + align-items

在flex中align-items是针对次轴cross axis作对齐，而grid中是针对Y轴作对齐，可以把它想象成表格中存储单元的vertical-align属性来看

<h3>grid + align-items</h3><div class="box"><div class="content">grid + align-items 多行文本垂直居中<a>grid + align-items 多行文本垂直居中</a>grid + align-items 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: grid;justify-content: center;align-items: center;}.content {width: 400px;background: #ccc;}</style>

8、grid + align-content

grid中的align-content与flex中的有些差异，在flex中仅能针对多行元素起作用，但在grid中没有这个问题，可以用作对子元素做垂直居中

<h3>grid + align-content</h3><div class="box"><div class="content">grid + align-content 多行文本垂直居中<a>grid + align-content 多行文本垂直居中</a>grid + align-content 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: grid;justify-content: center;align-content: center;}.content {width: 400px;background: #ccc;}</style>

9、grid + align-self

align-self是对grid Y轴的个别对齐方式，只要对单一子元素设置为align-self: center就能达到垂直居中

<h3>grid + align-self</h3><div class="box"><div class="content">grid + align-self 多行文本垂直居中<a>grid + align-self 多行文本垂直居中</a>grid + align-self 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: grid;justify-content: center;}.content {width: 400px;background: #ccc;align-self: center;}</style>

10、grid + place-items

place-items是align-items与justify-items的缩写，简单说就是水平和居中的对齐方式

<h3>grid + place-items</h3><div class="box"><div class="content">grid + place-items 多行文本垂直居中<a>grid + place-items 多行文本垂直居中</a>grid + place-items 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: grid;place-items: center;}.content {width: 400px;background: #ccc;align-self: center;}</style>

11、grid + place-content

place-content是align-content与juestify-content的缩写

<h3>grid + place-content</h3><div class="box"><div class="content">grid + place-content 多行文本垂直居中<a>grid + place-content 多行文本垂直居中</a>grid + place-content 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: grid;place-content: center;}.content {width: 400px;background: #ccc;align-self: center;}</style>

12、grid + margin

由于grid元素对空间解读的特殊性，只要在父层元素设定display: grid，在需要垂直居中的元素上设置margin: auto即可自动居中，这点与flex+margin类似

<h3>grid + margin</h3><div class="box"><div class="content">grid + margin 多行文本垂直居中<a>grid + margin 多行文本垂直居中</a>grid + margin 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: grid;}.content {width: 400px;background: #ccc;margin: auto;}</style>

13、display: table-cell

原理在于使用css的display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来实现垂直居中。（不建议使用，自认为table是个不好控制的东东，看效果图就知道这种方式并不适合多行文本，emmm）

<h3>display: table-cell</h3><div class="box"><div class="content">display: table-cell 多行文本垂直居中<a>display: table-cell 多行文本垂直居中</a>display: table-cell 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;display: table-cell;text-align: center;vertical-align: middle;}.content {width: 400px;background: #ccc;margin: auto;}</style>

14、calc

calc是计算机英文单词calculator的缩写，利用calc()方法可以将百分比及时且动态的计算出实际需要什么高度，但是大量使用会影响网页性能

<h3>calc</h3><div class="box"><div class="content">calc 多行文本垂直居中<a>calc 多行文本垂直居中</a>calc 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;}.content {width: 400px;background: #ccc;position: relative;top: calc((100% - 70px) / 2);margin: auto;}</style>

15、relative + translateY

这个方法是利用了top: 50%，让元素上放产生固定百分比的距离，接着让要居中的元素本身使用translateY的百分比来达成垂直居中的需求，犹豫translate的百分比单位是利用元素自身的尺寸作为100%，这样让我们要利用元素自身宽高做事变得很方便

<h3>relative + translateY</h3><div class="box"><div class="content">relative + translateY 多行文本垂直居中<a>relative + translateY 多行文本垂直居中</a>relative + translateY 多行文本垂直居中</div></div><style>.box {width: 500px;height: 200px;border: 1px #000 solid;}.content {width: 400px;background: #ccc;position: relative;top: 50%;transform: translateY(-50%);margin: auto;}</style>

情景三：多对象的垂直居中

1、line-height + inline-block

将多个元素或多行元素当成一个来看待，所以要讲这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用line-height来代替height的设置，

<h3>line-height + inline-block</h3><div class="box"><div class="content"><div>这是第一个元素</div><p>这是第二个元素</p><a>这是第三个元素</a></div></div><style>.box {width: 500px;border: 1px #000 solid;line-height: 200px;text-align: center;}.content {width: 400px;background: #ccc;display: inline-block;height: auto;line-height: 1;}</style>