HTML 中使一个 div 居中的方法

在网页设计中，让 div 元素居中是一个常见的需求。无论是水平居中、垂直居中，还是同时实现水平与垂直居中，都有多种方法可以实现。掌握这些技巧，能够显著提升页面的美观度与用户体验。

水平居中

1. 行内元素水平居中：若 div 为行内元素（如设置了 display: inline 或 display: inline-block），可以将其父元素的 text-align 属性设置为 center。例如：

<style>
   .parent {
        text-align: center;
    }
</style>
<div class="parent">
    <div class="child">我是要居中的 div</div>
</div>

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

<style>
   .child {
        width: 200px;
        margin: 0 auto;
    }
</style>
<div class="child">我是要居中的 div</div>

垂直居中

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

<style>
   .parent {
        display: flex;
        height: 400px;
        align-items: center;
    }
</style>
<div class="parent">
    <div class="child">我是要垂直居中的 div</div>
</div>

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

<style>
   .parent {
        position: relative;
        height: 400px;
    }
   .child {
        position: absolute;
        top: 50%;
        height: 100px;
        margin-top: -50px;
    }
</style>
<div class="parent">
    <div class="child">我是要垂直居中的 div</div>
</div>

水平垂直居中

1. 使用 flex 布局：在 flex 布局中，同时设置 justify-content: center 和 align-items: center 就能实现水平垂直居中。代码如下：

<style>
   .parent {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
    }
</style>
<div class="parent">
    <div class="child">我是要水平垂直居中的 div</div>
</div>

2. 绝对定位与 transform：使用绝对定位结合 transform: translate(-50%, -50%) 也可达到同样效果。代码如下：

<style>
   .parent {
        position: relative;
        height: 400px;
    }
   .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="parent">
    <div class="child">我是要水平垂直居中的 div</div>
</div>

以上这些方法在不同场景下各有优劣，开发者可以根据项目需求灵活选择使用。