如何使两个inline-block类型的div元素居中对齐且显示在同一行

我完全懂你现在的纠结——试了好几种CSS写法，要么两个div能并排但没法整体居中，要么能居中却没法在同一行，调.listy类的属性试了好多次都没搞定，还差点想用浮动 brute force 解决，对吧？其实你离正确方案只差一步，问题出在没有给这两个div的父容器设置居中对齐！

先拆解下你之前两种尝试的问题：

• 用display: inline-block;时，两个div确实能并排，但因为它们的父容器（默认是body）没有设置文本居中，所以这两个行内块元素会默认左对齐，导致整体不在页面中间；
• 换成display: inline;更糟，因为div里的h3、p都是块级元素，设置inline后会把这些块级元素强行变成行内，直接打乱了内部排版，自然没法正常居中显示内容。

正确的解决方案（只用一个类就能实现） #

核心思路是：给两个div的父容器设置text-align: center;，让内部的行内块元素整体居中，同时保持.listy的display: inline-block;来实现并排，内部的文本居中可以继续用你原来的设置。

完整代码示例：

h2 { 
  text-align: center; 
}
h3 { 
  text-align: center; 
}
p { 
  text-align: center; 
}
/* 父容器：控制两个div的整体居中 */
.list-container {
  text-align: center;
}
/* 单个div的样式：保持行内块实现并排，内部内容已通过h3/p的样式居中 */
.listy { 
  display: inline-block;
  /* 可选：加左右外边距，让两个div之间留间距，排版更美观 */
  margin: 0 25px;
  /* 可选：设置固定宽度，避免内容长短不一导致排版错乱 */
  width: 160px;
}

<h2>My two lists</h2>
<!-- 新增父容器，精准控制两个div的居中范围 -->
<div class="list-container">
  <div class="listy">
    <h3>Left things</h3>
    <p>Left</p>
  </div>
  <div class="listy">
    <h3>Right things</h3>
    <p>Right</p>
  </div>
</div>

为什么这个方法可行？ #

• list-container的text-align: center;会让所有行内/行内块子元素整体居中对齐，刚好匹配.listy的inline-block属性；
• 保持inline-block而不是inline，能让每个.listydiv保留块级元素的特性（比如可设置宽高、内边距），内部的h3、p也能正常保持块级排版，不会被打乱；
• 全程只用一个.listy类，完全符合你想只用一个选择器的需求，不用给每个div单独写样式，维护起来更灵活。

如果你不想额外加父容器，也可以直接给body设置text-align: center;，但这样会让页面上所有默认行内元素都居中，可能影响其他布局，所以更推荐单独套一个父容器来控制范围。

内容来源于stack exchange