如何让⼀个元素垂直⽔平居中⽅法总结第⼀种⽅法
div{
positition:absolute;
left:50%;(移动到参考物的宽度中⼼点的右侧)
margin-left:-当前元素宽度的⼀半；盒⼦再向左移动
top:50%;(移动到参考物的⾼度中⼼点的下侧)
margin-top:-当前元素⾼度的⼀半；盒⼦再向上移动
}
注意的是：想给⼦元素和⽗元素都设置居中，都要absolute
*兼容性好；缺点：必须知道元素的宽⾼
第⼆种⽅法
div.box{
width:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、下、左、右都为0-->
left:0;
right:0;
top:0;
bottom:0;
<!--设置元素的margin样式值为 auto-->
margin:auto;
}
*兼容性较好，缺点：不⽀持IE7以下的浏览器
第三种⽅法
text align centerdiv{
position: absolute;left: 50%；移动端参考物的中⼼点的右侧
top: 50%；移动端参考物的中⼼点的下侧
transform: translate(-50%,-50%);
向左和向上位移本⾝的宽⾼的⼀半
}
优点1.不论⽗元素和⼦元素宽⾼如何变，都可以⾃动识别到 2.⼦元素不设置宽⾼，也可以识别到
第四种⽅法
场景：⼀个块状元素A内有若⼲个块状元素B，要达到的效果是，所有块状元素B 在元素A 内⽔平居中显⽰。
<div class="A">
  <div class="B"></div>
  <div class="B"></div>
  <div class="B"></div>
</div>
⾸先，我们要设置元素A的⼤⼩为500px，设置背景⾊为green⽅便查看
.A｛
  width:500px;
  backgrond-color:green;
｝
然后，设置所有元素B 的宽度为100px，⾼度为100px，外边据都为5px，背景⾊为#000⽅便查看
.B｛
  width:100px;
  height:100px;
  magin:5PX;
  backgrond-color:green;
｝
当然现在的效果应该是这样的
我们要做的就是，先把所有元素B设置为⾏内块元素，让他们都排成⼀⾏， display:inline-block；
最后就是让所有的元素B居中了，到这⾥，相信很多⼈就猜到下⼀步要做什么了，我锦上添花，解释⼀下。
先想⼀想，如果是⾏内元素，我们⼀般让它怎么居中呢？答：当然是给它的⽗容器加⼀个text-align:center的样式。
这⾥我们已经把所有的元素B变成了⾏内块，也就有了⾏内元素的特性，所以，我们下⼀步要做的就是给元素A加text-align:center，这样我们的⽬的就达到了，请看效果：
5　、利⽤弹性盒⼦居中只需要三⾏代码即可实现
div{
display: flex;
justify-content: space-around;
align-items: center;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。