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

时间 2019-11-08

标签 css 布局元素垂直居中栏目 CSS 繁體版

原文原文链接

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

定宽：

定位居中(absolute)

html:html

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

css:web

.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:flex

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:code

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

css:orm

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

flex布局

html:htm

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

css:it

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:io

<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;
}