css 实现水平垂直居中的三种常用方法
首先基本结构样式
<body>
<div class="box">
<span></span>
</div>
</body>
使里面的span元素(粉色圆点)水平垂直居中于其div父元素(淘宝色正方形)
实现的效果图如下:
下面是常用的三种方法:
1.定位
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background: #f40;
position: relative;
margin: 200px auto;
}
.box span{
width: 20px;
height: 20px;
background: pink;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -10px;
top:50%;
margin-top: -10px;
}
</style>
2.flex 设置主轴及侧轴方向居中
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background: #f40;
margin: 200px auto;
display: flex;
justify-content: center;
align-items: center;
}
.box span{
width: 20px;
height: 20px;
background: pink;
border-radius: 50%;
}
</style>
3.最简单,最直接,最牛逼
直接在子元素span下设置 margin : auto;即可
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
background: #f40;
margin: 200px auto;
display: flex;
}
.box span{
width: 20px;
height: 20px;
background: pink;
border-radius: 50%;
margin: auto;
}
</style>