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

更新时间：2022-01-15 10:42:07

用到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%)******/
}

还有一种关于table的方法不常用。这三种都长用到！

上一篇 : ：Solr下一篇 : Web安全实践（12）密码探测

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

相关阅读

推荐文章