CSS中实现元素垂直水平居中需要掌握一些技巧,下面将介绍两种方法。方法一:使用flex布局.container{ display: flex; justify-content: center; ali
CSS中实现元素垂直水平居中需要掌握一些技巧,下面将介绍两种方法。
方法一:使用flex布局
.container{ display: flex; justify-content: center; align-items: center; }
以上代码中,将需要垂直水平居中的元素放入一个容器中,在容器上设置display:flex,这样就可以通过justify-content:center和align-items:center来实现元素的垂直水平居中。
方法二:使用相对定位和负边距
.container{ position: relative; } .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
以上代码中,也是将需要垂直水平居中的元素放入一个容器中,然后在容器上设置position:relative,元素的样式中设置position:absolute、top:50%、left:50%。这样就可以将元素的左上角移动到容器的中心位置,但是此时元素的中心坐标并不在容器的中心,需要通过transform:translate(-50%,-50%)来将元素中心坐标移动到容器中心位置,实现垂直水平居中。
以上两种方法都可以实现元素的垂直水平居中,可以根据实际情况选择使用。
粉丝
0
关注
0
收藏
0