CSS 实现垂直水平居中的方法

一、水平居中

1、行内元素

html 代码

<div class="box">
    <span class="child">aaa</span>
</div>

css 代码

.box{
 text-align: center;
}

2、块级元素

确定宽度的情况

html 代码

<div class="box">aaaa</div>

css 代码

/* 方法1 */
.box {
  width: 200px;
  margin: 0 auto;
  border: 1px solid red;
}

/* 方法2 */
.box {
  width: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  border: 1px solid red;
}

宽度不确定的情况

html 代码

<div class="box">aaaa</div>

css 代码

/* 方法1 */
.box {
    display: flex;
    justify-content: center;
    border: 1px solid red;
}

/* 方法2 */
.box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid red;
}

/* 方法3 */
 .box {
     display: table;
     margin: 0 auto;
     border: 1px solid red;
 }

/* 方法4 */
.box {
    margin-left: 50%;
    transform: translateX(-50%);
    border: 1px solid red;
}

二、垂直水平居中(上下左右居中)

html 代码

<div class="box"></div>

css 代码

方法1: flex 布局

.box {
    width: 300px;
    height: 300px;
    border: 1px solid red;

    display: flex;
    justify-content: center;
    align-items: center;
 }

方法2：绝对定位 + margin: auto

.box {
     width: 300px;
     height: 300px;
     border: 1px solid red;

     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     margin: auto
}

方法3：绝对定位 + 负margin

.box {
     width: 300px;
     height: 300px;
     border: 1px solid red;

     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -150px;
     margin-top: -150px;
}

方法4：绝对定位 + transform

.box {
     width: 300px;
     height: 300px;
     border: 1px solid red;

     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}