css 垂直居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 垂直居中相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*===================================*/
.d1{
height: 60px;
line-height:60px;
border:1px solid black;
}
/*===================================*/
.d2{
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
border:1px solid black;
}
.warp{
margin-top: 20px;
display: table;
border: 1px solid yellow;
height: 400px;
width: 300px;
}
.d3{
vertical-align: middle;
display: table-cell;
border: 1px solid green;
}
/*===================================*/
.outer{
margin-top: 20px;
display: table;
border: 1px solid red;
height: 600px;
width: 300px;
overflow: hidden;
*position: relative;
background-color:green\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
*background-color:#dddd00; /* ie 7*/
_background-color:#CDCDCD; /* ie 6*/
}
.inner{
vertical-align: middle;
display: table-cell;
/*border: 1px solid black;*/
/*text-align: left;*/
*position: absolute;
*top:50%;
}
.content{
*position: relative;
*top:-50%;
}
/*===================================*/
</style>
</head>
<body>
<div class="d1">1：我是单行垂直居中，原理：height: 60px === line-height:60px </div>
<div class="d2">2：多行未知高度文字的垂直居中,原理：padding-top: 20px; === padding-bottom: 20px;</div>
<div class="warp">
<div class="d3">
3；多行文本固定高度的居中，原理,：
父元素样式：display: table;height: 400px;
子元素样式：vertical-align: middle;display: table-cell;
<span style="font-size:20px;color:red">
Internet Explorer 6,7 并不能正确地理解display:table和display:table-cell，
Internet Explorer 6,7 及以下的版本中是无效的
</span>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="content">
<span style="font-size:20px;color:red">
Internet Explorer 6,7 并不能正确地理解display:table和display:table-cell，
Internet Explorer 6,7 及以下的版本中是无效的<br/>
</span>
兼容Internet Explorer 6,7:多行文本固定高度的居中
<br/>
.outer{
margin-top: 20px;
display: table;
border: 1px solid red;
height: 300px;
width: 300px;
overflow: hidden;
*position: relative;
}<br/>
.inner{
vertical-align: middle;
display: table-cell;
/*border: 1px solid black;*/
/*text-align: left;*/
*position: absolute;
*top:50%;
}
</div>
</div>
</div>
<!-- 以下内容不知道怎么回事，达不到左对齐
<div class="outer">
<div class="inner">
<div id="content">
兼容Internet Explorer 6:多行文本固定高度的居中
</div>
</div>
</div>
-->
</body>
</html>
以上是关于css 垂直居中的主要内容，如果未能解决你的问题，请参考以下文章