1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 未知宽高盒子水平垂直居中方法

未知宽高盒子水平垂直居中方法

时间:2018-05-16 04:16:39

相关推荐

未知宽高盒子水平垂直居中方法

1.用css3提供的transform属性

上代码

.wrap{width: 400px;height: 400px;background-color: red;position: relative;}.child{width: 100px;position: absolute;background-color: black;left: 50%;top: 50%;transform: translate(-50%,-50%)}//html<div class="wrap"><div class="child">fdsf</div></div>

效果如下:

利用弹性盒子

代码:

.wrap{display: flex;justify-content: center;align-items: center;height: 400px;width: 400px;border: 1px solid black}.child{background-color: cornflowerblue;width: 100px;margin: 10px}//html<div class="wrap"><div class="child">fdsf</div></div>

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