display布局实现父元素下的两个子元素第一个元素在中间,第二个元素在最右侧

在网页设计或前端开发中，实现这样的布局通常可以使用CSS的Flexbox或Grid布局。下面我会分别解释这两种方法：

**1. 使用 Flexbox (推荐)**

<div class="parent">
  <div class="child1">子元素1</div>
  <div class="child2">子元素2</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center; /* 使第一个元素居中 */
  align-items: flex-start; /* 保持默认顶部对齐 */
}

.child1 {
  flex: 0 1 auto; /* 不占剩余空间, 自适应宽度 */
}

.child2 {
  flex: 1; /* 占据剩余空间, 居右 */
}
</style>

**2. 使用 Grid Layout**

<div class="parent">
  <div class="child1">子元素1</div>
  <div class="child2">子元素2</div>
</div>

<style>
.parent {
  display: grid;
  place-items: center start; /* 第一个元素在中间，第二个元素在开始位置即右边 */
}

.child1, .child2 {
  /* 样式和其他设置 */
}
</style>

在这两种情况下，`child1`会被放置在父容器的中心，而`child2`会占据剩下的空间并位于最右侧。