行内元素与块元素的水平垂直居中
行内元素水平垂直居中
方式一:
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>
块元素水平垂直居中
纯定位 重点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素水平垂直居中</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
/*position: relative;*/
display: table-cell;
vertical-align: middle;
text-align: center;
}
/*
.child{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
*/
.child{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
line-height: 100px;
}
td{
width: 100px;
height: 100px;
background: orange;
vertical-align: middle;
text-align: center;
}
span{
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
line-height: 50px;
}
.wrap{
width: 200px;
height: 200px;
background-color: purple;
position: relative;
}
.xiongda{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<!-- positon+margin -->
<div class="box">
<div class="child">我是中间</div>
</div>
<!-- display:table-cell; -->
<table>
<th>
<td>
<span>MJJ</span>
</td>
</th>
</table>
<!-- 纯定位 -->
<div class="wrap">
<div class="xiongda"></div>
</div>
</body>
</html>
