CSS居中的多种方式

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

一. 单行文本垂直居中

1️⃣. 使`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;
  padding-bottom: 20px;

二. flex实现绝对完美居中

适用于PC与移动端布局

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;
  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; 能使块级内部的行内元素或是文本在容器中水平居中

CSS居中的多种方式

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

一. 单行文本垂直居中

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

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