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。设置此 divheight: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;
}

 

 

 

  

关键词:div lt gt px nbsp div> content 代码 height 如下

相关推荐:

CSS Menu List and OnClick (active color)

CSS元素(文本、图片)水平垂直居中方法

CSS垂直居中技巧,我只会23个,你会几个?

垂直居中总结

[HTML,CSS]div+css垂直水平居中

干货!各种常见布局实现+知名网站布局分析1.0版