How to center two divs in line with CSS?

Question

I want to have two divs on the same line whie still having them in center of the page. I tried this answer HERE but it didn't help. Here is approx picture for reference

And here is the snippet:

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>

I really don´t know how to make them on one line while still being centered and I will welcome any help I can get!

Answer 1

Used Flexbox, to place the boxes and text in the center.

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>