实现 块转 table table居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有宽度高度的盒子水平垂直居中</title>
<style>
.box{
width: 500px;
height: 500px;
background: pink;
margin:100px auto;
display:table;/*转换为表格*/
/* ie6兼容 */
_position: relative;
}
.son{
display:table-cell;/*转换为单元格*/
vertical-align: middle;
text-align: center;
/* ie6兼容 */
_position: absolute;
_left:50%;
_top:50%;
}
.content{
border:1px solid #f00;
display: inline-block;
/*ie6兼容*/
_position: relative;
_left:-50%;
_top:-50%;
_display:inline;
}
</style>
</head>
<body>
<div class="box">
<div class="son">
<div class="content">
这是文字内容，
<br>如果让他水平垂直居中呢？
<br>这是文字内容，
<br>如果让他水平垂直居中呢？
</div>
</div>
</div>
</body>
</html>
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
