行内元素水平垂直居中
方式一:
text-align: center; line-height: 200px; 方式二: 转换成 text-align: center; display: table-cell; vertical-align: middle;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行内元素水平垂直居中</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
color:#fff;
text-align: center;
/*line-height: 200px;*/
display: table-cell;
vertical-align: middle;
}
td{
width: 100px;
height: 100px;
background-color: green;
text-align: center;
/* 默认垂直方向局中 */
/*vertical-align: middle;*/
}
</style>
</head>
<body>
<div class="box">
<!-- <span>MJJ</span>在此位置等同于MJJ -->
<span>MJJ</span>
</div>
<!-- <table>
<th>
<td>Mjj</td>
</th>
</table> -->
</body>
</html>
View Code