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

CSS實現DIV水平 垂直居中-1

水平大家都知道，一般固定寬度給個margin:0 auto；就可以了。下麵實現水平垂直都居中

HTML

<div class="parent">

</div>

css

複製代碼
html,body{
    width: 100%;
    height: 100%;
}
.parent{
    width: 750px;
    height: 400px;
    background: orange;
    /*水平居中*/
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -200px;/*高度的一半*/
}
複製代碼

都居中了。也可以把margin-top:-200;換為CSS3新屬性:transform:translateY(-50%);

最後更新：2017-11-05 12:05:17

  上一篇：go  Web前端開發工程師基本要求
  下一篇：go  CSS3中DIV水平垂直居中-2(3)