div利用position与transform实现盒子水平垂直居中

有2个div盒子,外层的盒子box宽高300,背景颜色是蓝色。里边的盒子box1宽高是200,背景颜色是红色。html,css如下

正常情况下,盒子box1位于盒子box的左上角,如下图。

box1位于box左上角

现在我想让box1在box中水平垂直居中,该如何操作呢?

有一种方法很简单(当然flex更简单)

给box1定位,然后距离顶部50%,左侧50%。最后在通过transform调整即可。

注意:translate(-50%,-50%)移动的是自身的宽度和高度的50%,比如盒子的宽和高都是200px,那么transform: translate(-50%,-50%);就代表盒子box1向上移动100px,向左移动100px;

而position:releative;中top:50%代表高度是外边盒子高度的50%,比如外边盒子的高度是300px,那么top:50就表示向下移动150px.

box1在box中水平垂直居中

上述方法我把两个盒子都设置了宽度和高度是为了看的明显,此方法同样适合不固定的宽度和高度。

Views: 147 Tags: , ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注