CSS居中的多种方式

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

一. 单行文本垂直居中

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

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

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

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

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

  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; ...

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

②

绝对定位 left right 负margin-CodePen

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

2️⃣ 宽高不定

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

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

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

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

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

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

.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具有表单元素td的属性，会使它内部的内容垂直居中

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

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

水平居中

1️⃣ 块级元素水平居中

width: 80%;
margin: 0 auto;

2️⃣ 行内元素水平居中

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

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