如何使用 CSS 使 div 整体居中

在网页设计中，使 div 整体居中是一个常见需求。实现这一效果不仅能提升页面的美观度，还能优化用户体验。下面将介绍几种常用的 CSS 方法。

一、水平居中

（一）行内元素水平居中

如果 div 是行内元素（display 为 inline 或 inline - block），可以将其父元素的 text - align 属性设置为 center。例如：

.parent {
    text - align: center;
}
.child {
    display: inline - block;
}

（二）块级元素水平居中

对于块级元素的 div，将其 margin 属性设置为 “0 auto” 即可实现水平居中。代码如下：

.child {
    width: 200px;
    margin: 0 auto;
}

二、垂直居中

（一）使用 flexbox

Flexbox 是现代 CSS 中实现垂直居中的便捷方式。将父元素的 display 设置为 flex 或 inline - flex，然后使用 align - items 和 justify - content 属性。示例代码：

.parent {
    display: flex;
    align - items: center;
    justify - content: center;
    height: 400px;
}
.child {
    width: 100px;
    height: 100px;
}

（二）使用绝对定位和负边距

这种方法适用于已知子元素尺寸的情况。先将父元素设置为相对定位，子元素设置为绝对定位，然后通过负边距将其向上和向左移动自身宽度和高度的一半。代码如下：

.parent {
    position: relative;
    height: 400px;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
}

三、水平垂直居中

（一）使用绝对定位和 transform

这种方法不需要知道子元素的尺寸。父元素相对定位，子元素绝对定位，利用 transform: translate(-50%, -50%) 来实现水平垂直居中。代码示例：

.parent {
    position: relative;
    height: 400px;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

（二）使用 grid 布局

Grid 布局提供了强大的二维布局能力。将父元素的 display 设置为 grid，然后使用 place - items 属性轻松实现子元素的水平垂直居中。代码如下：

.parent {
    display: grid;
    place - items: center;
    height: 400px;
}
.child {
    width: 100px;
    height: 100px;
}

掌握这些 CSS 方法，能根据不同场景灵活选择合适的方式使 div 整体居中，为网页设计带来更多便利和创意。