第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > flex布局水平居中

flex布局水平居中

时间:2022-05-09 06:19:10

相关推荐

flex布局水平居中

想要让元素实现弹性布局,只需要要包含容器中(父元素)设置属性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;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。