父容器含两个div，以最右侧form为基准实现居中布局

我有两个div，分别是step-navigation和form，希望以form为基准让整体布局居中。当前DOM结构如下：

<div class="container">
    <div class="step-navigation">(...)</div>
    <div class="form">(...)</div>
</div>

当前布局效果：

期望实现的布局效果：

解决方案 #

以下几种CSS方案都能实现需求，核心是让容器宽度由form决定，同时整体水平居中：

方法1：Flexbox布局 #

利用Flexbox的align-items: center让子元素水平居中，容器宽度自动适配最宽子元素（即form）：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 可选：添加上下外边距，避免贴边 */
  margin: 2rem auto;
}

/* 给form设置固定或自适应宽度，根据实际需求调整 */
.form {
  width: 400px;
}

方法2：Grid布局 #

Grid的justify-items: center同样能让子元素水平居中，容器宽度由内容决定：

.container {
  display: grid;
  justify-items: center;
  margin: 2rem auto;
}

方法3：传统inline-block方案 #

通过父容器的text-align: center和子元素的inline-block实现对齐，注意恢复内部文本的左对齐：

.container {
  text-align: center;
  margin: 2rem auto;
}

.step-navigation, .form {
  display: inline-block;
  text-align: left; /* 避免子元素文本继承居中 */
}

.form {
  width: 400px;
}

以上方案都会让step-navigation对齐到form的中心位置，同时整个.container以form的宽度为基准在页面水平居中，符合你的期望效果。

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