CSS中想要让盒子上下垂直居中是一个经常出现的问题,下面介绍几种方法:第一种方法:可以使用flex布局来实现盒子上下居中,代码如下:.container{ display: flex; justify
CSS中想要让盒子上下垂直居中是一个经常出现的问题,下面介绍几种方法:
第一种方法:可以使用flex布局来实现盒子上下居中,代码如下:
.container{ display: flex; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/ }
第二种方法:可以使用绝对定位和负边距来实现盒子上下居中,代码如下:
.container{ position: relative; /*相对定位容器*/ } .box{ position: absolute; /*绝对定位*/ top: 50%; left: 50%; transform: translate(-50%,-50%); /*负边距来实现居中*/ }
第三种方法:可以使用display和margin来实现盒子上下居中,代码如下:
.container{ display: flex; justify-content: center; } .box{ margin: auto 0; /*margin:auto来实现水平居中,margin-top和margin-bottom为auto来实现垂直居中*/ }
以上三种方法都可以实现盒子上下垂直居中,具体使用哪种方法要根据实际情况来决定。
粉丝
0
关注
0
收藏
0