html - 如何使两个div居中符合CSS？

Question

我想在同一行上有两个 div，但仍将它们放在页面中央。我试过这个答案 HERE但它没有帮助。 Here is approx picture for reference

这是片段:

button {
  position: absolute;
  width: 200px;
  height: 200px;
}

#buttonTop {
  left: 200px;
}

#buttonLeft {
  top: 200px;
}

#buttonCenter {
  top: 200px;
  left: 200px;
}

#buttonRight {
  top: 200px;
  left: 400px;
}

#buttonBottom {
  top: 400px;
  left: 200px;
}

#zeme {
  position: relative;
  width: 600px;
  height: 600px;
  border-style: solid;
  border-width: 5px;
}

#menu {
  position: relative;
  width: 200px;
  height: 600px;
  border-style: solid;
  border-width: 5px;
}

#block_container {
  text-align: center;
}

#zeme,
#menu {
  display: inline;
}

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div id="block_container">
        <div id="menu">
          ahoj
        </div>

        <div id="zeme">
          <button id="buttonTop">Hello Top</button>
          <button id="buttonLeft">Hello Left</button>
          <button id="buttonCenter">Hello Center</button>
          <button id="buttonRight">Hello Right</button>
          <button id="buttonBottom">Hello Bottom</button>
        </div>
      </div>
    </div>
  </div>
</div>

我真的不知道如何在保持居中的同时将它们排在一条线上，我会欢迎任何我能得到的帮助!

Answer 1

使用 Flexbox，将框和文本放在中心。

body {
  margin: 0;
  padding: 0;
}

.centerPlacer {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.outer {
  outline: 1px solid red;
  height: 300px;
  width: 600px;
  display: flex;
}

.left {
  border: 1px solid black;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right {
  flex: 1;
}

.boxes {
  position: relative;
  display: flex;
  color: white;
}

.boxleft,
.boxright,
.top,
.bottom,
.center {
  position: absolute;
  height: 100px;
  width: 100px;
}

.top {
  background: red;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxright {
  right: 0;
  top: 100px;
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxleft {
  background: blue;
  top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom {
  background: orange;
  left: 100px;
  top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center {
  background: violet;
  top: 100px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="centerPlacer">
  <div class="outer">
    <div class="left">
      ajoy
    </div>
    <div class="right">
      <div class="boxes">
        <div class="top">Hello Top</div>
        <div class="boxleft">Hello Left</div>
        <div class="boxright">Hello Right</div>
        <div class="center">Hello Center</div>
        <div class="bottom">Hello Bottom</div>
      </div>
    </div>
  </div>
</div>