flex布局水平居中
想要让元素实现弹性布局，只需要要包含容器中（父元素）设置属性display:flex即可，平时工作用的最多的就是水平垂直居中啦，想要让元素水平居中，在容器中设置justify-content:center;而要实现垂直居中则可以设置align-items:center；重点来了，还有另一种奇淫技巧可以实现垂直居中，那就是当父元素设置了弹性布局并且设置了高度后，只要设置元素的margin:auto就
·
想要让元素实现弹性布局，只需要要包含容器中（父元素）设置属性display:flex即可，平时工作用的最多的就是水平垂直居中啦，想要让元素水平居中，在容器中设置justify-content:center;而要实现垂直居中则可以设置align-items:center；重点来了，还有另一种奇淫技巧可以实现垂直居中，那就是当父元素设置了弹性布局并且设置了高度后，只要设置元素的margin:auto就可以实现元素的垂直居中了！原理就是margin:auto就是用来分配元素的剩余空间的，前提是元素在非普通文档流中&&元素要有一个确定的高度&&要有剩余空间！！比如想要让块级元素右对齐，只需设置margin-left:auto即可
.box {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 1000px;
height: 600px;
border: 1px solid red;
}
.inner {
width: 300px;
height: 200px;
background-color: red;
}
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)