关于 Flex 布局
在项目的开发过程中，常遇到水平居中、垂直居中的需求。挺多人第一个想到可能是：text-align、vertical-align，但这两个属性仅适用于行内元素 。
{
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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论