使一个div元素上下左右居中

最新推荐文章于 2024-11-04 23:25:00 发布

是阿臻

最新推荐文章于 2024-11-04 23:25:00 发布

阅读量110

点赞数

文章标签：定位 css html flex css3

本文链接：https://blog.csdn.net/weixin_43191327/article/details/123059907

版权

第一种方法

浮动流自我调节

.box{
widht:200px;
height:200px;
position:relative;
}
.box .son{
width:100px;
height:100px;//给定高度和宽度
position:absolute:
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

第二种方法

flex布局

.div{//父盒子使用flex布局
width:200px;
height:200px;
display:flex;
justify-content:center;
align-item:center;
}

第三种方法

绝对定位+translate //在ios微信里面会造成闪退,说明来自张鑫旭[css世界]

.div{
width:200px;
height:200px;
positon:relative;
}
.div .son{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//这里的50%为自身宽度和高度的50%
}