14种用CSS实现水平或垂直居中的技巧

前言

css水平和垂直居中是一个常年存在的话题，经常出现在漂亮的网页和各大前端面试中。 很惭愧，两年前面试的时候我根本不知道如何水平居中和垂直居中。场面别提多尴尬了（ps：真想找个地洞钻进去）。 。 。经过两年的时间，我对这个问题有了一些认识。现在做一个小总结，也算是对自己学习过程的一个总结。 ？ ？它们是有区别的。

1。行高

适用场景：单行文本（垂直居中）
原理：设置单行文本的行高后，文本将放置在行高的垂直中心。
html:

class="example">Lorem ipsam.

css:

.example{    width: 400px;    background: #afddf3;    line-height: 50px;}

2, Line-height + inline-block

原理：多个元素或多行元素被视为行元素，因此我们需要将这些数据包装在额外的层中并将其设置为内联块。

由于inline-block在不同浏览器中会出现间隙，因此设置父元素的字体大小：0即可消除它们，实现完美的垂直居中。 ？当元素居中时不需要设置特殊的高度。 我们会使用 :before 伪类元素将其设置为 100% 高 inline-block，然后将子元素设置为以 inline-block 属性居中，然后我们可以使用垂直对齐 : middle 来实现这一点。垂直居中的目的。这种方法在过去是垂直居中的一个很好的解决方案。只需要修复内联块元素之间4-5px间距的小误差。别怕，设置父元素字体大小：0，子元素字体大小：15px就够了。

CSS：

.example3 {    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example3::before {    content: '';    display: inline-block;    height: 100%;    width: 0;    vertical-align: middle;}.example .con {    width: 300px;    font-size: 15px;    background: #afddf3;    display: inline-block;    vertical-align: middle;}

4、table + margin

适用场景：单个对象（水平居中）
原理：将子元素设置为块级表格，然后设置水平居中。 ？ margin负值

原理：设置绝对定位，top：50%；然后设置高度一半的负值来实现这一点。说白了，这只是一道简单的数学题。
缺陷：居中元素的高度需要调整。
优点：无浏览器兼容性问题
css：

.example6 {    position: relative;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example6 .con {    position: absolute;    top: 50%;    height: 80px;    margin-top: -40px;    width: 300px;    font-size: 15px;    background: #afddf3;}

7，absolute + margin auto

原理：当一个元素设置为绝对定位时，假设它无法捕获总的可用空间范围，所以 margin: auto 将无效，但是当你 top:0;bottom:0; 时设置后，绝对定位的元素会占用可用空间，然后你的 margin: auto 就会生效。
缺陷：定位的元素必须具有固定的宽度和高度（百分比也很重要）。
css:

.example7 {    position: relative;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example7 .con {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    height: 80px;    width: 300px;    font-size: 15px;    background: #afddf3;}

8,absolute+translate

原理：利用绝对定位的顶部和右侧，将元素的顶部和左侧各设为50%，然后使用变换：translate(- 50%,-50%));将位置移动到中心元素宽高的50%即可达到居中的目的。
缺陷：翻译是CSS3属性，低版本浏览器不支持。
显着优势：无需定义定位元素的宽度和高度。 ？对于侧轴（垂直轴）方向的对齐，请参见CSS-TRICKS。
缺陷：低版本浏览器不支持CSS3属性。
显着优点：无需记录定位元素的宽度和高度，代码干净整洁。？ ) 方向，请参阅 CSS TRICKS。
缺陷：低版本浏览器不支持CSS3属性。
显着优点：无需记录定位元素的宽度和高度，代码干净整洁。 ？就像一个柱子一样。弹性增长：[数量]；指定该项目相对于其他灵活项目的扩展程度，请参阅 CSS TRICKS。
缺陷：低版本浏览器不支持CSS3属性，难度稍大。一般情况下不考虑这种方法。
显着优点：无需定义定位元素的宽度和高度
css：

.example11 {    display: flex;    flex-direction: column;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example11:before {    content: '';    flex-grow: .5;}.example11 .con {    font-size: 15px;    background: #afddf3;}

12，Flex + margin

缺点：css3属性，低版本浏览器不支持。
CSS：

.example12 {    display: flex;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example12 .con {    margin: auto;    width: 300px;    font-size: 15px;    background: #afddf3;}

13。 Flex +align-self

原理：align-self定义了flex项仅在侧轴（垂直轴）方向上的对齐方式。
缺陷：低版本浏览器不支持CSS3属性。
CSS：

.example13 {    display: flex;    justify-content: center;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example13 .con {    align-self: center;    width: 300px;    font-size: 15px;    background: #afddf3;}

14。 Flex +align-content

原理：align-content当柔性容器中的项目没有占据横轴上的所有可用空间时，将柔性容器中的项目（垂直）对齐。 Flex 项目需要多个这些特性才能发挥作用。
缺陷：低版本浏览器不支持CSS3属性。
css:

.example14 {    display: flex;    align-content: center;    flex-wrap: wrap;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example14:before, .example14:after {    content: "";    display: block;    width: 100%;}.example14 .con {    height: 80px;    width: 300px;    font-size: 15px;    background: #afddf3;}

下面是一个比较常见的例子。通常，人们不希望图像变形，并且无论大小如何，它都显示在容器的中心（以下示例适用于第 8 项）。
html:

<div class="imgbox-box">   <div class="imgbox">       <img  alt="">   div>   <div class="imgbox">       <img  alt="">   div>   <div class="imgbox">       <img  alt="">   div>div>

css:

.imgbox-box {    display: flex;    justify-content: center;    margin-bottom: 40px;}.imgbox {    width: 200px;    height: 200px;    position: relative;    background: #ebf8ed;    overflow: hidden;}.imgbox img {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    max-width: 100%;    max-height: 100%;}

结论

有些是水平居中，有些是垂直居中。通过将其中两者结合起来，可以实现水平和垂直居中。