咨询：如何实现中间带Logo的2×2布局Div（附现有代码）

Hey there! Let's get that 2×2 grid sorted with a perfectly centered logo. Your existing flex setup is a great starting point—we just need to tweak the borders, add the missing grid item, and position the logo properly. Here's how to do it:

Modified Flex-Based Solution (Based on Your Code) #

First, let's fix the border duplication and add the centered logo. We'll use relative positioning on the container to anchor the logo absolutely in the middle.

Full Code

<div class="info-box">
  <div class="info-item grid1">Section 1</div>
  <div class="info-item grid2">Section 2</div>
  <div class="info-item grid3">Section 3</div>
  <div class="info-item grid4">Section 4</div>
  <div class="logo">My Logo</div>
</div>

* { box-sizing: border-box; }

.info-box {
  margin: 2rem auto 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  padding: 50px;
  position: relative; /* Required for absolute positioning of the logo */
  max-width: 800px; /* Optional: keeps the layout from stretching too wide */
}

.info-item {
  flex: 1 1 50%;
  min-height: 100px;
  padding: 50px;
}

/* Clean up borders to avoid duplication */
.grid1 {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.grid2 {
  border-bottom: 1px solid #000;
}

.grid3 {
  border-right: 1px solid #000;
}

/* Style the centered logo */
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfect centering trick */
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  background: #fff; /* Covers the grid lines behind the logo */
  font-weight: bold;
}

Key Changes Explained #

• Relative Container: Added position: relative to .info-box so the logo's absolute positioning is tied to the grid container, not the whole page.
• Simplified Borders: Removed redundant borders (like border-left on .grid2) to avoid double lines. The container's outer border plus targeted inner borders create a clean 2×2 grid.
• Centered Logo: Used position: absolute combined with transform: translate(-50%, -50%) to perfectly center the logo—this works even if the logo's size changes. The white background ensures the grid lines don't show through.

Bonus: Cleaner CSS Grid Approach #

If you're open to switching to CSS Grid (it's made for this kind of layout!), here's a more concise version:

* { box-sizing: border-box; }

.info-box {
  margin: 2rem auto 0;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px; /* Creates the grid lines without messy borders */
  border: 1px solid #000;
  padding: 50px;
  position: relative;
  max-width: 800px;
}

.info-item {
  padding: 50px;
  background: #fff; /* Fills the gap color */
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  background: #fff;
  font-weight: bold;
}

This uses gap to handle the grid lines automatically, so you don't have to manage individual borders on each item.

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