在项目的开发过程中，常遇到水平居中、垂直居中的需求。挺多人第一个想到可能是：text-align、vertical-align，但这两个属性仅适用于行内元素 。
// css 文件
{
text-align: center;
vertical-align: middle
}
本文，介绍一些常见的居中方法，包括水平居中、垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 此处省略一些众所周知的代码... -->
<style>
.parent {
width: 100px;
height: 100px;
border: 2px solid #f00; /* 红色 */
}
.child {
width: 50px;
height: 50px;
border: 2px solid #00f; /* 蓝色 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
- 水平居中：text-align: center 和 margin: 0 auto
其中 text-align 作用的对象是它的子元素，且必须为行内元素，块级元素无效。
<!-- 样式 -->
<style>
.parent {
width: 100px;
height: 100px;
border: 2px solid #f00;
text-align: center
}
.child {
width: 50px;
height: 50px;
border: 2px solid #00f;
}
</style>
<!-- HTML -->
<div class="parent">
<!-- 块级元素 -->
<div class="child">child</div>
<!-- 行内元素 -->
<img src="./images/pic.jpg" width="40px" height="40px"/>
</div>
下班继续写，哈哈哈……
