如何在HTML中居中指定div且不使其子元素居中

你之前用<center>标签的问题在于，这个标签会让它包含的所有元素都继承居中样式，所以里面的h1也会跟着居中。下面给你两个只针对目标div生效的方案，不会影响页面其他元素，也不会改变内部子元素的对齐方式：

方案1：利用margin:auto（推荐，兼容性好） #

给目标div设置固定或百分比宽度，再把左右margin设为auto，这样div会水平居中，内部元素默认保持左对齐（不会被强制居中）。

CSS代码：

.target-div {
  width: 600px; /* 也可以用百分比比如70%，根据需求调整 */
  margin-left: auto;
  margin-right: auto;
}

HTML结构：

<div class="target-div">
  <h1>Hello World!</h1>
</div>

方案2：相对定位+transform（无需设置宽度） #

如果不想给div设置固定宽度，用这个方法可以让div根据自身内容宽度水平居中，内部元素同样保持原有对齐：

CSS代码：

.target-div {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

HTML结构和上面一致，给目标div加上对应的class即可。

这两个方案都只作用于你标记了.target-div的单个div，不会影响页面其他元素，完全符合你的需求。

内容的提问来源于stack exchange，提问作者dyari