居中显示水平方式是很好实现的，在竖直方式就要麻烦一点。这里做个记录。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义图标</title>
<style type="text/css">
.box { height:200px; line-height:200px; background-color: #00438A; text-align: center;}
.middle { display:inline-block; vertical-align:middle; line-height:1.2; }
/*利用 text-align: center; 子类利用display:inline-block;vertical-align:middle; */
.div1{
height: 100px;
text-align: center;
background-color: #00458A;
line-height:100px;
}
.div_span
{
display:inline-block;
vertical-align:middle;
}
.top {vertical-align:text-top}
/*利用 flex实现 */
.div2
{
display: flex;
justify-content: center;
align-items: center;
background-color: #00458A;
height: 40px;
margin-top: 10px;
}
.div3
{
margin: 10px;
background-color: #00458A;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<span class="middle" >居中显示</span>
</div>
<div class="div1">
<span class="div_span" >居中显示2</span>
</div>
<br />
<div class="div2">
<span>居中显示</span>
</div>
<br>
<div class="div3">
<p>第一个</p>
<p>我是第一个</p>
<p>我是第一个在这里</p>
</div>
<p>
https://mp.weixin.qq.com/s/9f4UaZWzYSJB_ZdwhS3A3A
</p>
</body>
<script>
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中显示</title>
<style>
main
{
width: 100%;
height: 500px;
background-color: #3E8E41;
position: relative;
}
main > div
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<main>
<div>
测试居中显示
</div>
</main>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中显示</title>
<style>
main
{
width: 100%;
height: 500px;
background-color: #3E8E41;
position: relative;
text-align: center; /*水平方向的*/
}
main > div
{
position: absolute;
top: 50%; /*竖直方向的*/
transform: translateY(-50%); /*优化*/
background-color: #005588;
display: inline-block;
}
</style>
</head>
<body>
<main>
<div>
测试居中显示2
</div>
</main>
</body>
</html>
