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实现垂直居中。

.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为自身元素宽高的负一半，实现水平垂直居中。

.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

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

.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通过伪元素

.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可以让所有的行内块级元素水平垂直居中。

.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实现垂直居中。

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

效果