行级元素水平垂直居中
text-align + line-height
<style>
p{
width:200px;
height:40px;
background-color:red;
text-align:center;/*水平*/
line-height:40px;/*垂直*/
}
</style>
<body>
<p>
john
</p>
<p>
<span>john</span>
</p>
</body>
模拟单元格
单元格特性：内容垂直居中，默认vertical-align:middle
<table border="1" width="200px"height="100px">
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
<style>
p{
width: 200px;
height: 40px;
background-color: red;
text-align: center;
/*模拟单元格*/
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<p>
<span>john</span>
</p>
</body>
块级元素水平垂直居中
纯定位
已知 子元素 宽高
<style>
#father{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
#child{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
宽高不确定
<style>
#father{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
#child{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
position+margin
宽高 不确定
<style>
#father{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
#child{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
flex布局
<style>
#father{
width: 200px;
height: 200px;
background-color: red;
display: flex;
justify-content: center;/*水平*/
align-items: center;/*垂直*/
}
#child{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
为子元素设置margin：auto
<style>
#father{
width: 200px;
height: 200px;
background-color: red;
display: flex;
}
#child{
width: 100px;
height: 100px;
background-color: blue;
margin: auto;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
模拟单元格
可参考行内元素的水平垂直居中
<style>
#father{
width: 200px;
height: 200px;
background-color: red;
/*模拟单元格*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
#child{
width: 100px;
height: 100px;
background-color: blue;
/*注意*/
display: inline-block;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
