你的位置:首页 > 网页设计

[网页设计]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 >1:我是单行垂直居中,原理:height: 60px === line-height:60px </div>
<div >2:多行未知高度文字的垂直居中,原理:padding-top: 20px; === padding-bottom: 20px;</div>
<div >
<div >
3;多行文本固定高度的居中,原理,:
父元素样式:display: table;height: 400px;
子元素样式:vertical-align: middle;display: table-cell;
<span >
Internet Explorer 6,7 并不能正确地理解display:table和display:table-cell,
Internet Explorer 6,7 及以下的版本中是无效的
</span>
</div>
</div>
<div >
<div >
<div >
<span >
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 >
    <div >
      <div id="content">
兼容Internet Explorer 6:多行文本固定高度的居中
      </div>
    </div>
  </div>
-->

</body>
</html>