如何使用CSS实现两个DIV元素居中并排对齐

要实现两个圆形DIV在页面中居中且并排显示，可通过以下调整完成：

1. 添加父容器并设置Flex布局
   创建父容器包裹两个圆形DIV，利用Flex布局实现子元素水平排列，同时让容器在视口中垂直水平居中。

2. 清理并优化圆形DIV的样式
   移除重复的display声明（保留flex用于内部文字居中），补全background属性的分号，调整margin避免冗余定义。

3. 优化内部链接样式
   调整链接的颜色和下划线，确保与圆形样式匹配。

完整代码示例 #

CSS 代码

/* 父容器：实现页面居中+子元素并排 */
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 控制两个圆形之间的间距 */
}

.circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  margin: 5%;  
  background: white;
}

/* 优化链接样式 */
.circle a {
  color: #fff;
  text-decoration: none;
}

HTML 代码

<div class="container">
  <div class="circle"><a href="#">1</a></div>
  <div class="circle"><a href="#">2</a></div>
</div>

说明 #

• .container的min-height: 100vh确保容器占满整个视口高度，justify-content: center和align-items: center实现容器内容的水平垂直居中，gap属性控制两个圆形之间的间距。
• 移除了.circle中重复的line-height、text-align、vertical-align属性（Flex布局已能实现内部文字居中），简化样式代码。

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