Container unable to center horizontally and vertically

Question

It has been like 6 hours, since I could not figure out this problem I decided to write this thread. I tried to put this container in the middle of the page (see image to have a better visual understanding). Container not in the middle The gray background color you see in this image is "body", which is the goal I want to achieve. I want the container outlined in red to be centered vertically and horizontally within this gray box.

<style>
  html {
    background-color: #212529;
    margin: 0;
    padding: 0;
  }

  .container {
    border: 2px red solid;
  }

  .Section-Title {
    font-size: large;
  }
</style>

<div
  class="container"
>
  <div class="Section-Title text-center">Social Media</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col col-2">
      <a href="https:"
        ><button class="btn btn-dark">GitHub</button></a
      >
    </div>
    <div class="col col-2">
      <a href="https:"
        ><button class="btn btn-dark">Twitter</button></a
      >
    </div>
    <div class="col col-2">
      <a href=""
        ><button class="btn btn-dark">Discord</button></a
      >
    </div>
    <div class="col col-2">
      <a href="https:"
        ><button class="btn btn-dark">Instagram</button></a
      >
    </div>
  </div>
  <div class="Section-Title text-center">Tweaks</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col col-2">
      <a href="subpage_Shadow.html"
        ><button class="btn btn-dark">Shadow X</button></a
      >
    </div>
    <div class="col col-2">
      <a href="#"><button class="btn btn-dark">Relic 2.0</button></a>
    </div>
    <div class="col col-2">
      <a href="#"><button class="btn btn-dark">SnapShot</button></a>
    </div>
    <div class="col col-2">
      <a href="#"><button class="btn btn-dark">DSGuise</button></a>
    </div>
  </div>
  <div class="Section-Title text-center">Repo</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col">
      <button
        class="raise"
        onclick="window.open('cydia://urm')"
      >
        Add to Cydia
      </button>
    </div>
    <div class="col">
      <button
        class="raise"
        onclick="window.open('si')"
      >
        Add to Sileo
      </button>
    </div>
    <div class="col">
      <button
        class="raise"
        onclick="window.open('zbra:/')"
      >
        Add to Zebra
      </button>
    </div>
    <div class="col">
      <button
        class="raise"
        onclick="window.open('install')"
      >
        Add to Installer
      </button>
    </div>
  </div>
  <div class="Section-Title text-center">Important Stuff</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col col-3">
      <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        ><button class="raise">Shadow X Source Code</button></a
      >
    </div>
    <div class="col col-3">
      <a href=""
        ><button class="raise">Relic for Devs</button></a
      >
    </div>
  </div>
</div>

Give this a try @Ice https://css-tricks.com/centering-css-complete-guide/ — Cutey from Cute Code, Apr 19 '22 at 17:36

score 0 · Answer 1 · answered Apr 19 '22 at 17:42

Use this:

.container > * {
  width: fit-content;
  margin: auto;
}

See it working here:

html {
  background-color: #212529;
  margin: 0;
  padding: 0;
}

.container {
  border: 2px red solid;
  margin: auto;
}

.Section-Title {
  font-size: large;
}

.container>* {
  width: fit-content;
  margin: auto;
}

<div class="container">
  <div class="Section-Title text-center">Social Media</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col col-2">
      <a href="https:"><button class="btn btn-dark">GitHub</button></a
      >
    </div>
    <div class="col col-2">
      <a href="https:"
        ><button class="btn btn-dark">Twitter</button></a
      >
    </div>
    <div class="col col-2">
      <a href=""
        ><button class="btn btn-dark">Discord</button></a
      >
    </div>
    <div class="col col-2">
      <a href="https:"
        ><button class="btn btn-dark">Instagram</button></a
      >
    </div>
  </div>
  <div class="Section-Title text-center">Tweaks</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col col-2">
      <a href="subpage_Shadow.html"
        ><button class="btn btn-dark">Shadow X</button></a
      >
    </div>
    <div class="col col-2">
      <a href="#"><button class="btn btn-dark">Relic 2.0</button></a>
    </div>
    <div class="col col-2">
      <a href="#"><button class="btn btn-dark">SnapShot</button></a>
    </div>
    <div class="col col-2">
      <a href="#"><button class="btn btn-dark">DSGuise</button></a>
    </div>
  </div>
  <div class="Section-Title text-center">Repo</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col">
      <button class="raise" onclick="window.open('cydia://urm')">
        Add to Cydia
      </button>
    </div>
    <div class="col">
      <button class="raise" onclick="window.open('si')">
        Add to Sileo
      </button>
    </div>
    <div class="col">
      <button class="raise" onclick="window.open('zbra:/')">
        Add to Zebra
      </button>
    </div>
    <div class="col">
      <button class="raise" onclick="window.open('install')">
        Add to Installer
      </button>
    </div>
  </div>
  <div class="Section-Title text-center">Important Stuff</div>
  <div class="row text-center justify-content-md-center mt-5">
    <div class="col col-3">
      <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><button class="raise">Shadow X Source Code</button></a
      >
    </div>
    <div class="col col-3">
      <a href=""
        ><button class="raise">Relic for Devs</button></a
      >
    </div>
  </div>
</div>

Container unable to center horizontally and vertically

1 Answers1