How to center two divs in line with CSS? - html

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>