Unable to center div horizontally in one half of the parent div

I have a webpage with two divs, black and gray as show in the picture. There is another div, blue one, which goes halfway to the gray div. And the other half of the gray div has a vertical div, numbers, which needs to be in the center horizontally.

Now I can center it with position:absolute but it doesn't stay in the center in small screen sizes when the gray div gets smaller.

I just need it to stay in the middle till 850px as I will change the layout below it.

Any solution (JS/CSS) as long as the width of the div is using a percentage rather than a fixed a value.

Here's the codepen: codepen

Here's the code:

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.wrapper-left{
  width: 75%;
  min-height: 100vh;
  background-color: #000;
  float: left;
}

.wrapper-right{
  width: 25%;
  min-height: 100vh;
  background-color: #999;
  float: right;
  position: relative;
}

.value-container {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(-50%, -50%);
  text-align: center;
}


.value-box:not(:first-child):before {
    display: block;
    content: '';
    background: black;
    height: 1px;
    width: 30px;
    color: #ffff;
    margin: 10px auto;
    font-weight: 700;
}

.value-box:last-child:before {
    margin: 10px auto 5px auto;
}


.value{
  font-family: Lato-Light;
  font-size: 2rem;
  color: #ffffff;
}

.value-text{
  font-family: Lato-Light;
  font-size: 0.8rem;
  color: #ffffff;
  text-transform: lowercase;
}


.value-box:last-child .timer-text{
  font-size: 1.2rem;
}

.wrapper-image {
  position: absolute;
  top: 50%;
  right: 35%;
  transform: translate(50%,-50%);
  width: 45%;
  height: 67vh;
  border-radius: 5px;
  background-color: blue;
  box-shadow: 2px 2px 12px #000;
}
<div class="wrapper">
        <div class="wrapper-left"></div>
        <div class="wrapper-right">
            <div class="value-container">
                <div class="value-box">
                    <span class="value days">000</span>
                    <span class="value-text">a</span>
                </div>

                <div class="value-box">
                    <span class="value hours">00</span>
                    <span class="value-text">z</span>
                </div>

                <div class="value-box">
                    <span class="value minutes">00</span>
                    <span class="value-text">o</span>
                </div>

                <div class="value-box">
                    <span class="value seconds">00</span>
                    <span class="value-text">t</span>
                </div>
            </div>
        </div>
        <div class="wrapper-image"></div>   
</div>

Here's a screenshot:

demo



Read more here: https://stackoverflow.com/questions/64417306/unable-to-center-div-horizontally-in-one-half-of-the-parent-div

Content Attribution

This content was originally published by Zak at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: