整理 div 个元素

Question

我想组织我的三个 div 元素，使其看起来像下图所示。我该怎么做？

Answer 1

这是一些基本代码

/* for demo purposes */
html, body, #container {
  text-align: center;
  height: 100%;
}

/* main container */
#container {
  position: relative;
}

#red {
  height: 50%;
  background:red;
}

#green { 
  background:green; height: 50%;
}

#yellow {
  background:yellow;
  position: absolute;
  width: 50%;
  height: 50%;
  /* vertical centering */
  top:50%;
  transform:translateY(-50%);
  /* horizontal centering */
  left: 0;
  right: 0;
  margin:0 auto;
}

<div id="container">
  <div id="red">Top</div>
  <div id="green">Bottom</div>
  <div id="yellow">Middle</div>
</div>

Answer 2

在这里，您有一种选择：https://jsfiddle.net/x91qdxxh/

HTML:

CSS:

.full {
  width: 200px;
  height: 200px;
}

.upper {
  background-color: red;
  width: 100%;
  height: 100px;
}

.lower {
  background-color: green;
  width: 100%;
  height: 100px;
}

.middle {
  background-color: yellow;
  position: relative;
  left: 50px;
  top: -150px;
  width: 100px;
  height: 100px;
}

整理 div 个元素

Organizing div elements

html

css

position