閱讀671 返回首頁    go 阿裏雲 go 技術社區[雲棲]


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的方法不常用。這三種都長用到!

最後更新:2017-11-05 12:05:14

  上一篇:go  CSS實現DIV水平 垂直居中-1
  下一篇:go  jq實現選項聯動輪播