Can't horizontally center div inside another div

Question

generally, I know how to center divs but I am lost for the following case:

/* Container4 Styling */

.container4 {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #CDE5E1;
  text-align: center;
}


/* Tab HP Styling */

.one {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: red;
  position: relative;
}


/* Tab HP BUTTON Styling */

.content {
  height: 100vh;
  width: 100%;
}

.button-wrap {
  position: absolute;
  bottom: 0;
}

a.button {
  color: #fff;
  text-decoration: none;
  padding: 15px 50px;
  display: inline-block;
}

a.active {
  color: black;
  display: inline-block;
}

div[class*="content-"] {
  display: none;
}

div.active {
  display: inline-block;
}

<div class="container4">


  <div class="content">
    <div class="content-1 active one">
      <h1>Content</h1>



      <div class="button-wrap">
        <a href="#" class="button">  Button1  </a>
        <a href="#" class="button">    Button2  </a>
        <a href="#" class="button">  Button3  </a>
        <a href="#" class="button">  Button4 </a>
      </div>



    </div>

    <div class="content-2 two"> content 2 </div>

    <div class="content-2 three"> content 3 </div>

    <div class="content-2 four"> content 4 </div>

  </div>


</div>

So basically, my issue is that I need my buttons to stick to the bottom of 'Container 4' div. For doing that, I positioned the 'button-wrap' to absolute and 'bottom: 0'. But then the 4 buttons are no longer centered. I tried SO many different options (adding margin: 0 auto; text-align; changing positions etc) but none of them worked for me. It's either removing the positioning absolute (which then centers the buttons but also moves the buttons up to the top of the Container 4 div). Or when I use absolute (as shown in the code) then the buttons stick to the bottom but are no longer centered.

And just for context: this is build with Jquery, so that on click on the button the respective content (1, 2, 3 or 4) will be shown in Container4.

Many thanks in advance!

Answer 1

You need to make the buttons div take up the whole width so they will center properly. Add width: 100%; to .button-wrap.

/* Container4 Styling */

.container4 {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #CDE5E1;
  text-align: center;
}


/* Tab HP Styling */

.one {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: red;
  position: relative;
}


/* Tab HP BUTTON Styling */

.content {
  height: 100vh;
  width: 100%;
}

.button-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
}

a.button {
  color: #fff;
  text-decoration: none;
  padding: 15px 50px;
  display: inline-block;
}

a.active {
  color: black;
  display: inline-block;
}

div[class*="content-"] {
  display: none;
}

div.active {
  display: inline-block;
}

<div class="container4">

  <div class="content">
    <div class="content-1 active one">
      <h1>Content</h1>

      <div class="button-wrap">
        <a href="#" class="button">Button1</a>
        <a href="#" class="button">Button2</a>
        <a href="#" class="button">Button3</a>
        <a href="#" class="button">Button4</a>
      </div>

    </div>

    <div class="content-2 two"> content 2 </div>

    <div class="content-2 three"> content 3 </div>

    <div class="content-2 four"> content 4 </div>

  </div>

</div>