一行文字垂直居中：利用line-height来设置
多行文字垂直居中：利用display:table-cell来设置。
代码以及效果：
垂直居中：使用绝对定位和transform
代码以及效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<div id="child">
<img alt="" src="img/u=2639088341,2223755776&fm=27&gp=0jpg" style="display: inline-block; vertical-align: middle;" />
</div>
</body>
</html>
<div></div>垂直居中：
代码与效果：
<head>
<meta charset="utf-8" />
<title></title>
<style>
zz {
position: absolute;
top: 50%;
width: 200px;
height: 100px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="zz">
<span>测试垂直居中</span>
</div>
</body>
<div><div></div></div>里的div垂直居中：
代码与效果：
<head>
<meta charset="utf-8" />
<title></title>
<style>
root-div{
/注意，外容器需要指定一个height：/
height: 700px;
}
children-div{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="root-div">
<div class="children-div">Hello</div>
</div>
</body>
1、如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了；
用下面的代码即可实现：
代码如下：
2、如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法，在table外面再套上相应的div；
代码如下：
<table>
<tr>
<td style="vertical-align:middle;height:300px;background-color:red"></td>
</tr>
</table>
3、多行文字居中还有另外一种方法：
多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top 就行：
middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}
<div align="center">
<div style="border:#FF0000 1px solid; width:100px; height:52px;vertical-align:middle; line-height:52px">垂直居中</div>
</div>
如想设置文字垂直居中,那么一定要设置ling-height的属性值和height值一样,这样才会使文字垂直居中,单独设置vertical-align:middil是不会使文字垂直居中的
单独的设置一个DIV是不使该标签居中的,你要把想要居中的DIV放在另外一个DIV里面,把那个DIV设置为居中就行了
请注意：#test {vertical-align:middle;}s
#test 表示了div里面所有元素,当然包含了span,input,img这些内联元素了。
vertical-align
初始值： baseline（缺省值）
可否继承：否
适用于： 内联元素
说明：vertical-align:baseline使元素的基线同父元素的基线对齐．
警告：vertical-align不能影响表格单元中的内容的对齐，对于块元素中的内容也一样．
请注意,vertical-align只影响内联元素,比如span,img,em,input,a等这些元素,而对div,h3,p等这些块元素是无效的
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）