`margin: 0 auto;` and `width:50%` combination doesn't center my div

Question

I have some issues when trying to center vertically and horizontally divs that are inside other divs.

This is what I'm trying to do:

I've also read How to horizontally center a <div>? and How to center a "position: absolute" element.

This question isn't a duplicate to neither of those, because I don't want to center a div that has position:absolute. I want to center a div with no position attribute that is inside a div that has position:absolute.

margin: 0 auto; and width:50% does not work.

Aligning images, text and buttons require different methods each, which I do not know.

Here is my code:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(back-image.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  overflow: hidden;
  background-color: gray;
}

html {
  min-height: 100%;
}

#container {
  width: 80%;
  height: 100%;
  margin: 0 auto;
}

.top-container,
.center-container,
.side-container {
  position: absolute;
}

.top-container {
  left: 20%;
  top: 0;
  height: 30%;
  width: 50%;
  background: red;
  text-align: center;
}

.center-container {
  left: 20%;
  top: 40%;
  height: 50%;
  width: 50%;
  background: blue;
  text-align: center;
}

.side-container {
  left: 70%;
  top: 14%;
  height: 80%;
  width: 30%;
  background: green;
}

.top-container #logo {
  /* background: black;     */
  margin-top: 50px;
  width: 50%;
  height: 50px;
}


/* .top-container #logo img {
    display: inline-block;
} */

.top-container .title {
  margin-top: 50px;
  width: 100%;
  height: 40px;
  /* margin: 0 auto; */
  background: black;
  border-bottom: 1px solid red;
}

.center-container .title {
  /* margin: 0 auto; */
  background: greenyellow;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid red;
}

#text-box {
  color: white;
  margin: 0 auto;
  width: 100%;
  height: 50%;
  background: black;
}

.center-container #text-box {
  background: black;
  height: 100%;
}

#text-box p {
  margin: 10px 10px;
  padding: 5px;
  text-align: left;
}

#text-box span {
  color: cyan;
  margin: 10px;
  text-align: right;
}

.side-container .title {
  /* margin: 0 auto; */
  background: greenyellow;
  height: 40px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid red;
}

#settings-button {
  width: 50%;
  background: none;
  border: 2px solid red;
  color: white;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
  margin: 0 auto;
  height: 40px;
}

<div id="container">
  <div class="top-container">
    <div id="logo"><img url="logo.png"></div>
    <div class="title">
      <h1>Home Page</h1>
    </div>
  </div>
  <div class="center-container">
    <div class="text-box">%PLACEHOLDER_1%</div>
  </div>
  <div class="side-container">
    <div id="text-box">
      <p>URL: %PLACEHOLDER_URL%</p>
      <p>URL Refresh Rate: %PLACEHOLDER_URR%</p>
      <p>Brightness: %PLACEHOLDER_Brightness%</p>
    </div>
    <input id="settings-button" type="submit" name="" value="Settings">
  </div>
</div>

This is the result:

There are some issues that I don't know how to fix:

• Can't center the image that's inside #logo.
  Its div has background: black. It is using width:50% and it is centered nicely inside .top-container but the img does not center to the center of #logo div. I've tried: this and this, but it only made things even worse.

• Can't center #settings-button inside .side-container.** It's the same as #logo. .center-container .title and .side-container .title behave like they are set at top= 5px. Why aren't they placed at the beginning of their wrapper divs: .center-container and .side-container respectively ?

I've used text align: center for the .title which centered the text only horizontally. What does it need to be done for the text to center vertically as well ?

I've used width:100% for the text divs because I don't need the divs to be centered. Changing width: to whatever percent still keeps it centered.

I've tried adding display:grid and flex and inline-block but they only make things even worse.

This is as far as I am capable of going.

Answer 1

I attempted to fix your code example, but had difficulty relating the various parts of your question to your code example. Instead, I'll tell you how to fix it yourself.

Centering vertically is quite tricky - unless you use flexbox or CSS Grid. Then it's dead easy. Honestly, if you spend about 30 mins fiddling with flexbox you'll have it down - and the layout is straight-forward and makes sense, unlike floats.

There is a reason why Bootstrap re-did their entire platform from Bootstrap3 to Bootstrap4, primarily to change from using floats to flexbox.

Flexbox requires two things:

1. A parent container (e.g. DIV, section, aside, p, etc)

2. One or more child elements (e.g. div, p, img, etc)

You turn flexbox on on the parent: display:flex;

Then, there are various switches. Some are set on the parent (as in the case of justify-content) but others might be set on the items (as with flex-grow:1)

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet for Flexbox.

Watch the tutorial and in 40 mins from now your problem will be solved -- and you'll know flexbox.

_{P.S. I have no connection to the video or its presenter - I was fortunate to discover it, and now pass it along.}