如何使用 CSS 实现 div 居中

在网页设计中，让 div 元素在页面中居中是一个常见需求。本文将详细介绍几种使用 CSS 实现 div 居中的方法，帮助开发者轻松解决这一问题。

水平居中

1. 行内元素水平居中：当 div 为行内元素（display: inline 或 display: inline-block）时，在父元素中设置 text-align: center 即可实现 div 的水平居中。例如：

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    /* 其他样式 */
}

2. 块级元素水平居中：对于普通块级元素（display: block），可以通过设置 margin: 0 auto 来实现水平居中。代码如下：

.child {
    width: 200px; /* 设置宽度 */
    margin: 0 auto;
    /* 其他样式 */
}

垂直居中

1. 绝对定位与负边距：利用绝对定位和负边距可以实现 div 的垂直居中。首先将父元素设置为相对定位，子元素设置为绝对定位，然后通过负边距将子元素向上移动自身高度的一半。示例代码：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px; /* 设置高度 */
    margin-top: -50px; /* 负边距为自身高度一半 */
    /* 其他样式 */
}

2. Flexbox 布局：使用 Flexbox 布局实现垂直居中更加简单直观。在父元素上设置 display: flex，然后使用 align-items: center 或 justify-content: center 来实现垂直或水平居中。代码如下：

.parent {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

3. Grid 布局：Grid 布局同样能轻松实现 div 垂直居中。在父元素上设置 display: grid，然后使用 place-items: center 可以同时实现水平和垂直居中。示例：

.parent {
    display: grid;
    place-items: center;
}

水平垂直居中

1. 绝对定位与负边距：结合绝对定位和负边距，先将子元素的 top 和 left 设为 50%，再通过负边距将其向上和向左移动自身宽度和高度的一半，实现水平垂直居中。代码如下：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px;
    margin-left: -100px;
    /* 其他样式 */
}

2. Flexbox 与 Grid 布局：使用 Flexbox 或 Grid 布局时，只需在父元素上同时设置水平和垂直居中的属性即可。例如，使用 Flexbox：

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

使用 Grid 布局：

.parent {
    display: grid;
    place-items: center;
}

通过上述方法，开发者可以根据具体需求灵活选择合适的 CSS 技术来实现 div 的水平、垂直或水平垂直居中，提升网页的美观度和用户体验。