正文
在项目的开发过程中，常遇到水平居中、垂直居中的需求。挺多人第一个想到可能是：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>
