如何让 4 div 围绕一个居中的 div？

Question

我将黄色 div 水平和垂直居中，如下所示：
<div style="position:absolute;width:830px;height:590px;background:yellow;left:50%;top:50%;transform:translate(-50%, -50%);"></div>
我想在居中的div周围有4个div，所以一个div在左边，一个div在右边，一个div在上面和下面的一个 div，每个应该只接触视口的一个边框，每个应该接触居中 div.

的一个边框

Answer 1

恕我直言，最简单的方法是使用 CSS-Grid。然后您可以通过 grid-column 和 grid-row 放置或使用 grid-area.

定义放置

要让元素 (div) 触及视口的一个边框，您需要将网格的高度定义为 100vh。您还需要删除默认 body margin

.container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ". top ."
    "left center right"
    ". bottom .";
}

.center {
  grid-area: center;
}

.top {
  grid-area: top;
}

.right {
  grid-area: right;
}

.bottom {
  grid-area: bottom;
}

.left {
  grid-area: left;
}


/* for demo purpose only */
body {
  margin: 0;
}

.container > div {
  box-sizing: border-box;
  border: 2px dashed black;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="center">Center</div>
  <div class="top">Top</div>
  <div class="right">Right</div>
  <div class="bottom">Bottom</div>
  <div class="left">Left</div>
</div>

Answer 2

我认为其他答案更好，但这里有一个替代方案：

.container {
  width: 100%;
  height: 100vh;
  background: purple;
  gap: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.upper-row,
.middle-row,
.bottom-row {
  flex: 1;
}

.upper-row .inner-row {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.3);
  width: calc(100% / 3);
  height: 100%;
}

.middle-row {
  display: flex;
  gap: 20px;
}

.middle-row .inner-row {
  width: calc(100% / 3);
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

.middle-row .inner-row:nth-child(2) {
  background: red;
}

.bottom-row .inner-row {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.3);
  width: calc(100% / 3);
  height: 100%;
}

<div class="container">
  <div class="upper-row">
    <div class="inner-row"></div>
  </div>
  <div class="middle-row">
    <div class="inner-row"></div>
    <div class="inner-row"></div>
    <div class="inner-row"></div>
  </div>
  <div class="bottom-row">
    <div class="inner-row"></div>
  </div>
</div>

https://jsfiddle.net/kdsv99/140w56th/16/

Answer 3

如果你这样做是为了学习，首先停止在 html 上使用样式，但包括一个 css 文件，其次你应该研究 flexbox 属性或网格. 您可以使用 display flex 创建一个带有 display:flex 的容器；包含 3 个元素 div1 您的 div 和 div2，然后在 div 1 和 2 中创建其他 2 个 div 并给它们 display:flex; flex-direction：行； 25% 宽度；高度自动；您的 div 宽度应为 50%

如何让 4 div 围绕一个居中的 div？

How to have 4 div around one centered div?

html

css

transform