在网页设计和开发中，元素居中是常见的布局需求。无论是块级元素还是行内元素，居中处理都是实现优雅布局的关键。本文将深入探讨CSS中实现块元素与行内元素居中的方法，并辅以实例说明，帮助读者轻松掌握这一技能。
块元素与行内元素的概念
在开始讨论居中方法之前，我们先来了解一下块元素和行内元素的基本概念。
块元素
块元素会独占一行，并且可以设置宽度和高度。常见的块元素包括：
-
- ,
- ,
行内元素
行内元素不会独占一行，其宽度由内容决定，高度和宽度不可设置。常见的行内元素包括：
块元素居中
水平居中
使用 margin: 0 auto;
当块级元素的宽度固定时，可以通过设置 margin: 0 auto; 使其水平居中。这种方法适用于单行文本或已知宽度的块级元素。
.centered {
width: 200px;
margin: 0 auto;
}
使用 Flexbox 布局
Flexbox 是一种强大的布局工具，可以轻松实现元素的水平居中。通过设置父元素的 display: flex; 和 justify-content: center;，子元素即可自动居中。
.flex-container {
display: flex;
justify-content: center;
}
垂直居中
已知高度的元素
当元素具有固定高度时，可以通过设置 padding-top 和 padding-bottom 相等，使元素垂直居中。
.centered {
height: 100px;
padding-top: 50px;
}
使用 Flexbox 布局
Flexbox 同样可以用来实现元素的垂直居中。通过设置父元素的 display: flex; 和 align-items: center;，子元素即可自动垂直居中。
.flex-container {
display: flex;
align-items: center;
}
行内元素居中
水平居中
行内元素的水平居中通常比较简单，可以通过设置父元素的 text-align: center; 来实现。
.centered {
text-align: center;
}
垂直居中
行内元素的垂直居中相对复杂，通常需要结合 line-height 和 height 属性来实现。
.centered {
height: 100px;
line-height: 100px;
}
总结
本文介绍了CSS中实现块元素与行内元素居中的方法，包括水平居中和垂直居中。通过灵活运用这些方法，你可以轻松实现各种居中布局，从而提升网页的美观性和用户体验。