css布局：块级元素垂直居中

2024年5月3日 111次阅读 来源: 莉莉安

项目中，我使用的flex布局居多，直接上代码。

定宽：

定位居中(absolute)

html:

<div class="main"></main>

css:

.main{
  width:400px;
  height:200px;
  background:#eee;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-200px;
  margin-top:-100px;
}

html:

<div class="main"></div>

css:

body {
    height: 100%;
}
.main{
 width: 400px;
   height: 200px; 
  background:#eee;
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

非定宽：

定位居中(absolute+translate)

html:

<div class="main">
    hello world
</div>

css:

.main{
  background:#eee;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

flex布局

html:

    <body>
        <div class="main">
        </div>
    </body>

css:

html,body{
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    justify-content:center;
    align-items:center;
}
.container{
    width: 400px;
    height: 200px;
    background: #ccc;
}

table

html:

<body>
    <div class="container">
        <div class="main">
            <div class="inner"></div>
        </div>
    </div>
</body>

css:

html,body{
     height: 100%;
}
.container{
    width:100%;
    height:100%;        
    display: table;
}
.main {
    display: table-cell;
    vertical-align: middle;
}
.inner{
    width: 400px;
    height: 200px;
    background: #ccc;
    margin:0 auto;
}
    原文作者：莉莉安
    原文地址: https://segmentfault.com/a/1190000008175320
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞