在HTML中实现`div`居中主要有以下四种方法，涵盖水平居中、垂直居中及混合居中场景：

一、外边距自动居中（最常用方法）

通过设置`margin: 0 auto；`实现水平居中，适用于已知父元素宽度的场景。

示例：

```css

.container {

width: 400px; /* 父元素宽度 */

margin: 0 auto; /* 水平居中 */

background-color: CB8B8C;

}

```

二、文本对齐（简单场景）

适用于文本内容居中，不适用于块级元素（如`div`）。

示例：

```css

.container {

text-align: center;

}

```

三、Flexbox布局（灵活方案）

通过Flexbox实现水平和垂直居中，适用于复杂布局需求。

示例：

```css

.container {

display: flex;

justify-content: center; /* 水平居中 */

align-items: center; /* 垂直居中 */

height: 400px; /* 父元素高度 */

}

```

四、绝对定位与负外边距（垂直居中）

通过绝对定位结合负外边距实现垂直居中，需设置父元素相对定位。

示例：

```css

.container {

position: relative;

height: 400px;

}

.center-div {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /* 通过偏移量实现居中 */

width: 200px;

background-color: CB8B8C;

}

```

总结：

水平居中：优先使用`margin: 0 auto；`或Flexbox的`justify-content`属性。- 垂直居中：结合Flexbox的`align-items`或绝对定位的`transform`属性。- 混合居中：Flexbox可同时实现水平和垂直居中，适用性最广。