比如说在网页中想要一个宽高分别为300px,200px的div盒子(.box)水平/垂直居中。可以通过以下几种方法实现~
calc()
.box{
position: fixed;
top:calc(50% - 100px);
left: calc(50% - 150px);
width: 300px;
height: 200px;
background-color: pink;
}
calc 中的50%是指父级盒子的一半,减号 的空格不能少,
如果是计算top值,减去div一半的height;
如果是计算left值,减去div一半的width,嗯,这样就可以实现水平垂直都居中啦。
通过定位
- 水平居中
.box{
position: fixed;
left: 0;right: 0;margin: auto;
width: 300px;
height: 200px;
background-color: pink;
}
- 垂直居中
.box2{
position: fixed;
top: 0;bottom: 0;margin: auto;
width: 300px;
height: 200px;
background-color: pink;
}
- 水平垂直居中
.box2{
position: fixed;
top: 0;right:0;bottom: 0;left:0;
margin: auto;
width: 300px;
height: 200px;
background-color: pink;
}
将元素更改为为inline-block元素后水平居中
.box的父元素{
text-align:center;
}
.box{
display:inline-block;
}
将元素更改为block元素后水平居中
.box{
display:block;
margin:auto;
}
利用flex布局进行垂直居中
.box的父元素{
display:flex;
align-items:center;
}