css盒子水平垂直居中

1采用flex弹性布局：

2子绝父相+margin：负值：

3.子绝父相+margin:auto：

4子绝父相+transform：

5通过伪元素

6table布局

7grid弹性布局

文字水平垂直居中链接：文字水平垂直居中-CSDN博客

以下为盒子水平垂直居中

<template>
  <div>
    <div class="father">
      <div class="son"></div>
    </div>
  </div>
</template>

1采用flex弹性布局：

在父元素设置display: flex表示该容器内部的元素将按照flex进行布局，再设置align-items: center表示这些元素将相对于本容器水平居中，justify-content: center实现垂直居中。

javascript 复制代码

.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  background-color: aqua;
}

效果

2子绝父相+margin：负值：

设置left和top为50%，此时位置会偏右自身元素的宽高，再设margin-left和margin-top为自身元素宽高的负一半，实现水平垂直居中。

javascript 复制代码

.father {
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  position: relative;
}
.son {
  width: 200px;
  height: 100px;
  background-color: palegoldenrod;
  position: absolute;
  top: 50%;
  left: 50%;
  //宽度的一半
  margin-left: -100px;
  //高度的一半
  margin-top: -50px;
}

效果：

3.子绝父相+margin:auto：

，设置top、left、right、bottom为0,在设置margin:auto

javascript 复制代码

.father{
        width:400px;
        height:300px;
        background-color: rebeccapurple;
        position: relative;   //父级设置为相对定位
    }
    .son{
        width:100px;
        height:40px;
        background: red;
        position: absolute;   //设置为子级绝对定位
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

效果

4子绝父相+transform：

设置left和top为50%，此时位置会偏右自身元素的宽高，再设transform: translateX(-50px) translateY(-50px);

javascript 复制代码

.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  position: relative;
}
.son{
  width: 200px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-100px) translateY(-50px);
}

效果

5通过伪元素

javascript 复制代码

.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  text-align: center;
}
.father::before{
  content : '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.son{
  width: 200px;
  height: 100px;
  background-color: pink;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
}

效果

6table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中。

javascript 复制代码

.father {
  display: table-cell;
  width: 400px;
  height: 300px;
  background: rebeccapurple;
  vertical-align: middle;
  text-align: center;
}
.son {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: forestgreen;
}

效果

7grid弹性布局

在父元素设置display: drid表示该容器内部的元素将按照flex进行布局，再设置align-items: center表示这些元素将相对于本容器水平居中，justify-content: center实现垂直居中。

javascript 复制代码

.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  display: grid;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  background-color: greenyellow;
}

效果