CSS中实现元素垂直水平居中显示是前端开发中很常见的需求,下面将介绍几种实现方式。1. 绝对定位+负边距使用绝对定位的方式,需要将元素的宽高确定,使用负边距来居中,如下所示:.container {
CSS中实现元素垂直水平居中显示是前端开发中很常见的需求,下面将介绍几种实现方式。
使用绝对定位的方式,需要将元素的宽高确定,使用负边距来居中,如下所示:
.container { position: relative; height: 400px; } .box { position: absolute; width: 200px; height: 100px; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; }
使用flex布局可以很方便地实现元素的垂直水平居中:
.container { display: flex; align-items: center; justify-content: center; height: 400px; } .box { width: 200px; height: 100px; }
使用grid布局同样可以轻松实现垂直水平居中:
.container { height: 400px; display: grid; place-items: center; } .box { width: 200px; height: 100px; }
使用以上三种方式都可以很方便地实现元素的垂直水平居中显示,其中flex布局和grid布局是CSS3新增的布局方式,使用起来更加优雅方便。
粉丝
0
关注
0
收藏
0