CSS3中DIV水平垂直居中-2(3)

最新推荐文章于 2023-05-25 14:38:05 发布

zzm_

最新推荐文章于 2023-05-25 14:38:05 发布

阅读量81

点赞数

用到CSS3中display的新属性。

HTML

<div class="parent">

</div>

CSS

html,body{
    width: 100%;
    height: 100%;
}
/*方法二*/
body{
    display: flex;
    align-items: center;/****水平居中****/
    justify-content: center;/*垂直居中*/
}
.parent{
    width: 750px;
    height: 400px;
    background: orange;
    /*方法一*/
    /*margin: 0 auto;*/
    /*position: relative;*/
    /*top: 50%;*/
    /*margin-top: -200px;*//***此行等于transform:translateY(-50%)******/
}