您的位置:首页 > 其它

让div水平垂直居中

2018-02-23 18:58 344 查看
方法一(最常用的办法)

div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}


方法二(IE8不支持)

div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%;    /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}


方法三(利用弹性盒,将需要居中的div的父元素的display属性设置flex)

.box{

height:600px;
display:flex;
justify-content:center;
align-items:center;
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: