垂直居中html代码_14种CSS实现水平或垂直居中的技巧

前言

CSS水平和垂直居中是一个永恒的话题，它经常出现在美丽的网页和主要的前端访谈中。

令我感到羞耻的是，在两年前的采访中，我不知道如何水平和垂直居中。那个场景是如此尴尬（PS：我真的很想在地面上找到一个钻孔）。 。 。两年后，我对这个问题有所了解。现在，我进行了一个小的汇编，可以将其视为我自己学习的摘要。

注意：当本文中的示例未指定HTML代码时，使用以下结构：

class="example example14">    <div class="con">        超级好用超级放心            <a href="https://tinypng.com/" target="_blank">在线压缩图片a>        <span>压缩完可以 span>     div></div>

只是班级名称将有所不同。
1。线 -
适用的方案：单行文本（垂直中心）
原理：设置单线文本线的线高之后，文本将位于线高度的垂直中间位置。
html：
class="example">Lorem ipsam.</div>

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

2。线 -  + -Block
原理：将多个元素或行元素视为一行元素，因此我们必须将这些数据打包一层并将其设置为-Block。
由于-block将在不同的浏览器中存在差距，因此父元素字体大小：0设置为消除它，从而实现完美的垂直中心。
CSS：
.example2{    width: 400px;    border: 1px solid #dcdcdc;    line-height: 100px;    font-size: 0;}.example2 .con {    display: inline-block;    line-height: 2;    vertical-align: middle;    width: 300px;    font-size: 15px;    background: #afddf3;}

3。： + -Block
原理::伪级元素匹配块属性的写作应该是一种非常传统的垂直居中技术。这种方法的优点是，子元素的集中不需要特殊的高度设置。
我们将使用伪级元素来设置具有100％高块的-Block，然后将需要以 -Block属性为中心的子元素设置，然后使用-Align：实现垂直中心的目的。
过去，这种方法实际上是一个非常好的垂直中心解决方案。它只需要处理 - 块元素之间的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。表 +
适用的方案：单个对象（级别为中心）
原理：将子元素设置为块级表，然后将其设置为水平中心。
CSS：
.example4 {    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example .con {    display: table;    margin: 0 auto;    width: 300px;    font-size: 15px;    background: #afddf3;}

5。table + table -cell + -Align：
适用的方案：多个对象（垂直中心）
html：
<div class="example example5">    <div class="con">        超级好用超级放心            <a href="https://tinypng.com/" target="_blank">在线压缩图片a>        <span>压缩完可以打包下载哦 span>     div>    <div class="con">        CSS-TRICKS    div>div>

CSS：
.example5 {    display: table;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example .con {    display: table-cell;    vertical-align: middle;    width: 300px;    font-size: 15px;    background: #afddf3;}

6。 +负值
原理：设置绝对定位，顶部：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。 +自动
原理：当元素设置为绝对定位时，假设它无法捕获总体可用空间范围，那么：自动将失败，但是当您设置顶部：0;：0;：0;：0;时，绝对定位元素将捕获可用的空间，然后您的：自动将生效。
缺陷：定位元件必须具有固定宽度和高度（也计算百分比）。
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。 +
原理：使用顶部和右侧将元素的顶部和左部设置为50％，然后使用：（-50％，-50％）;中间元素本身的宽度和高度的50％可以达到居中的目的。
缺陷：这是一个CSS3属性，低转换浏览器不支持。
显着优势：无需固定定位元件的宽度和高度。
CSS：
.example8 {    position: relative;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example8 .con {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    font-size: 15px;    background: #afddf3;}

9. flex +对准项目
适用的方案：多行文本（垂直中心）
原理：弹性布局，对齐项定义了弯曲容器当前行的侧轴（垂直轴）方向在侧轴（垂直轴）方向上的对齐，请参见CSS-。
缺陷：CSS3属性，不受较低版本浏览器的支持。
显着优势：无需固定定位元件的宽度和高度，代码干净整洁。
CSS：
.example9 {    display: flex;    align-items: center;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example9 .con {    font-size: 15px;    background: #afddf3;}

10。弹性 +  -
适用的方案：多行文本（水平中心）
原理：弹性布局， - 在主轴（水平轴）中设置或检索弹性盒元件的对齐，请参阅CSS-。
缺陷：CSS3属性，不受较低版本浏览器的支持。
显着优势：无需固定定位元件的宽度和高度，代码干净整洁。
CSS：
.example10 {    display: flex;    justify-content: center;    margin-top: 10px;    width: 400px;    height: 150px;    font-size: 0;    border: 1px solid #dcdcdc;}.example .con {    height: 80px;    font-size: 15px;    background: #afddf3;}

11。弹性 +： +屈曲成长
适用的方案：多行文本（垂直中心）
原理：弹性布局，flex-：;就像列一样垂直显示项目。 Flex Grow：[];指定项目相对于其他灵活项目的扩展量，请参阅CSS-。
缺陷：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。弹性 +
缺陷：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。屈曲 +对齐自己
原理：对齐自身定义侧轴（垂直轴）方向的屈曲子项目的对齐。
缺陷：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 +对齐 -
原理：当弹性容器中的项目不占据横轴上的所有可用空间时，对齐容器中的项目（垂直）。此属性仅在弹性容器中的项目具有多个项目时才起作用。
缺陷：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 src="imgs/head.jpeg" alt="">   div>   <div class="imgbox">       <img src="imgs/head.jpeg" alt="">   div>   <div class="imgbox">       <img src="imgs/head.jpeg" 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%;}

结论
有些是水平居中的，有些是垂直居中的。将其中的两个放在一起可以达到水平和垂直中心。
感谢您的阅读，希望这些技巧对您有用。