css垂直居中

方案1：div 的显示方式设置为表格（兼容性差）

html代码如下：

<div id="wrapper">
<div id="cell">
<div class="content">这是居中的div</div>
</div>
</div>

css代码如下：

#wrapper {
display: table;
width: 500px;
height: 500px;
background: #f00;
}

#cell {
display: table-cell;
vertical-align: middle;
}
.content{background:#ff0; font-size: 55px;}

 

方案2：绝对定位的 div，把它的 top 设置为 50％， margin-top 设置为（-元素高度/2）

html代码如下：

<div id="wrapper">
　　<div class="con">这是一个div模块</div>
</div>

css代码如下：

#wrapper {
position: relative;
background: #f00;
width: 500px;
height:500px;
}
.con{
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
background: #ff0;
}

 

方案3：在 content 元素外插入一个 div。设置此 div的height:50%; margin-bottom:（-元素高度）。content 清除浮动，并显示在中间。

html代码如下：

<div class="wrap">
<div id="floater"></div>
<div id="content">居中的div</div>
</div>

css代码如下：

.wrap{
width: 500px;
height: 500px;
background: #f00;
}
#floater {
float: left;
height: 50%;
margin-bottom: -120px;
}

#content {
clear: both;
height: 240px;
position: relative;
background: #ff0;
font-size: 55px;

}

方案4：只能将单行文本垂直居中

html代码如下：

<div id="content"> div文本</div>

css代码如下：

#content {
height: 500px;
line-height: 500px;
background: #f00;
color: #ff0;
font-size: 55px;
}

 

方案5：利用margin： auto；

html代码如下：

<div id="wrap">
<div id="content"> div文本</div>
</div>

css代码如下：

#wrap{
width: 500px;
height: 500px;
background: #f00;
font-size: 55px;
position: relative;
}
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
background: #ff0;
}

方案6：flex盒子布局（兼容性不好，但是移动端用起来很方便）

html代码如下：

<div class = "content">
<div class="toggle">垂直居中的div</div>
</div>

css代码如下：

.content{
display: flex;
justify-content: center;
align-items: center;
height: 500px;
background: #f00;
}

.toggle {
background: #ff0;
width: 100%;
font-size: 55px;
}