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

用到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的方法不常用。这三种都长用到！

2022-12-23
2021-05-20
2021-10-29
2021-08-28
2021-06-28
2022-12-23