前段时间在开发小程序的过程中,遇到了关于传统居中实现方式问题。什么是我理解的传统居中呢?就是学习前端基础的时候,第一想到的居中方式。根据“子绝父相定位居中”
子绝父相定位居中
.box{
position: absolute;
width: 500px;
height: 500px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
background-color: red;
}
请注意:这样的写法,通过改变盒子的定位方式,原本在页面开发是并不提倡,而且在小程序开发过程中有明显的兼容性问题。
那么还有什么实现盒子居中的方法吗?当然有啦,就是自2015年就开始逐渐流行的弹性盒子flex布局。
flex布局实现元素居中
.body{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content:center;
-webkit-justify-content: center;
width: 100%;
height: 100vh;
background-color: yellow;
.box{
width: 500px;
height: 500px;
background-color: red;
}
}
注意哦:我在父盒子中使用了height:100vh;vh是(viewheight)可视容器盒子的缩写;这样的写法就可以实现垂直居中的效果了。设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。