div 居中：让网页元素如沐春风
div 居中，是网页布局中常见且实用的技巧。它能将网页元素垂直或水平居中，让页面更加美观协调。接下来，我将手把手教你如何让 div 居中，让你轻松搞定网页布局！
水平居中
1.text-align: center;
最简单的方法是使用 `text-align` 属性。将它设置为 `center`，即可让段落或其他文本元素水平居中。
```css
div {
text-align: center;
}
```
2.margin: 0 auto;
如果要将 div 或其他块级元素水平居中，可以使用 `margin` 属性。将 `margin-left` 和 `margin-right` 同时设置为 `auto`，即可让元素在父元素中水平居中。
```css
div {
margin: 0 auto;
}
```
垂直居中
1.line-height: 相应高度;
对于行内元素，如图片或文本，可以使用 `line-height` 属性。将它设置为与元素高度相同的值，即可让元素垂直居中。
```css
img {
line-height: 500px;
}
```
2.垂直居中神器（Flexbox）
Flexbox 是一种强大的布局工具，可轻松实现垂直居中。使用 `display: flex;` 和 `align-items: center;` 即可。
```css
div {
display: flex;
align-items: center;
}
```
进阶技巧
标签：div居中,水平居中,垂直居中,CSS布局,Web前端开发
兴趣推荐
-
技术大揭秘：多头排列，WEB前端开发中的“多面手”
10个月前: 各位前端开发的同仁们，让我们一起走进“多头排列”的奇幻世界，揭开它在WEB前端开发中“多面手”的奥秘吧！