[分享]css两个div同行水平对齐

在开发网页时，经常遇到需要将两个或多个div元素水平对齐的情况。下面，我们将介绍一种实现两个div同行水平对齐的方法。首先，我们需要将两个div元素包装在一个容器内。然后，为该容器设置display:...

在开发网页时，经常遇到需要将两个或多个div元素水平对齐的情况。下面，我们将介绍一种实现两个div同行水平对齐的方法。

首先，我们需要将两个div元素包装在一个容器内。然后，为该容器设置display: flex;属性，这将使得容器内的元素采用弹性布局。

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

.container {
  display: flex;
} 

接下来，我们需要对每个子元素设置flex-grow: 1;和flex-basis: 0;属性。这将使得两个子元素的宽度均分容器的可用宽度。

.box1, .box2 {
  flex-grow: 1;
  flex-basis: 0;
} 

最后需要指定子元素中较高的元素垂直居中。我们可以使用align-self: center;属性来实现。

.box1 {
  align-self: center;
} 

完整代码如下：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

.container {
  display: flex;
}

.box1, .box2 {
  flex-grow: 1;
  flex-basis: 0;
}

.box1 {
  align-self: center;
} 

上述方法可以确保两个div元素水平对齐，并且可以适应不同的屏幕尺寸。