CSS实现『垂直居中』的方式

一. 单行文本垂直居中

1️⃣. 使line-height的值等于height的值

line-height等于height 单行文本垂直居中

line-height等于height.png

  height: 45px;  line-height: 45px;

2️⃣. 使padding-top的值等于padding-bottom的值，容器高度不固定，由内容撑开(没有明确要求最好不要设置高度)

padding-top等于padding-bottom 单行文本对齐

padding-top的值等于padding-bottom的值实现垂直居中.png

  padding-top: 20px;  px;

二. flex实现绝对完美居中

适用于PC与移动端布局

flex实现完美居中

flex实现完美居中

给容器添加：

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

三. position: absolute;绝对定位实现垂直居中

1️⃣ 固定宽高
①

子元素：position: absolute; margin: auto; left: 0; top: 0; bottom: 0; right: 0;，垂直容器居中对齐定宽高且给容器设定position: relative

position: absolute; margin: auto; ...

position: absolute; margin: auto; ...

容器中的块级子元素

  position: absolute;  margin: auto;  top: 0;   right: 0;  bottom: 0;  left: 0;    width: 249px;  height: 249px;  background: pink;

②

绝对定位垂直居中『定宽高，就是知道需要被垂直居中的块的宽高的值』 position: absolute; left: 50%; top: 50%; margin-left: -50% * width; margin-top: -50%*height;

绝对定位 left right 负margin-CodePen

绝对定位 left: 50%; top: 50%; margin-left: -50%*width; margin-top: -50%*height;

  position: absolute;  left:50%;  top:50%;  margin-left: -125px;  margin-top: -100px;

2️⃣ 宽高不定

position: absolute; transform: translate(-50%, -50%); left: 50%; right: 50%『不定宽高』垂直居中

translate(-50%,-50%)是相对自身width height偏移

绝对定位宽高不定绝对居中 transform: translate(-50%, -50%); left: 50%; right: 50%

绝对定位宽高不定绝对居中transform: translate.png

四.::before、height: 100%、inline-block、vertical-align: center;实现垂直居中

❗️vertical-align: center;只适用于『行内元素inline』与表单元素td table-cell

图片默认的对齐方式是vertical-align: baseline,导致图片下方会出现缝隙

图片间隙①

图片间隙②

.box::before伪元素作为对齐的参考元素，vertical-align: middle; 图片在容器中居中①

在容器的内部开始的位置添加一个span作为参照对齐的元素 vertical-align: middle; 图片在容器中居中②

vertical-align: center;实现在容器中垂直居中.png

.box::before {  content: '';  height: 100%;  display: inline-block;  vertical-align: middle;}/* img对齐的是参照 .box::before伪元素 */.box img {  vertical-align: middle;}

五.display: table-cell实现垂直居中

display: table-cell(添加) 会使 块级元素『脱离块级属性』，例如宽度不足时会自动收缩，vertical-align: middle; text-align: center;回使 已经脱离了块级属性的元素垂直居中。

注：display: table-cell具有表单元素td的属性，会使它内部的内容垂直居中

display: table-cell; vertical-align: middle; text-align: center;实现垂直集中

display: table-cell实现垂直居中.png

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

水平居中

1️⃣ 块级元素水平居中

块级元素， 设置『❗️固定宽度』(如不设置width，块级元素充满容器。)，在自身添加『左右margin等于auto』

width: 80%;margin: 0 auto;

2️⃣ 行内元素水平居中

❗️父元素(块级)使用text-align: center;，能让内部的匿名行盒(文字)、行内元素(span)、inline-block元素在父亲里水平居中

给块级容器设定text-align: center; 能使块级内部的行内元素或是文本在容器中水平居中

给块级容器设定text-align: center; 能使块级内部的行内元素或是文本在容器中水平居中

版权声明：本文为博主原创文章，未经博主许可不得转载

原著是一个有趣的人,若有侵权,请通知删除