CSS Vertically position an image

Question

I would like to be able to position the gray container in the middle of the background, also vertically, but I can't understand how the percentages work, why the left one works and the top doesn't

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

html {
    font-size: 62.5%;
}

body {
    background-image: url("wallpaper.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    top: 0px;
}

.container {
    background-color: lightgray;
    opacity: 50%;
    width: 200px;
    height: 200px;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    position: relative; 
}

<body>
    <div class="container">
        <div class="container-name"></div>
        <div class="container-stats"></div>
    </div>
</body>

Here is the preview

score 1 · Answer 1 · answered Jan 19 '22 at 02:23

You need to give the body a height, or else it'll be the elements height, that's why you can't move top or bottom, since the parent (body) is only 200px, since that's all there is. Where the parent doesn't have a height property, it'll automatically adjust to it's content height, 200px in this case. Also, the top property from body can be removed.

You could add height: 100vh; to your body, that'll be the 100%/units height of the view port.

The calc() function you have is taking 50% of it's parent size, then substracting 100px, which in your case is 50% of your element. That'll center the element with percentages.

An alternative to your centering solution could be:

.container {
  background-color: lightgray;
  opacity: 50%;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  position: relative;
  transform: translate(-50%, -50%);
}

This will move your container 50% left of parents width, 50% from the top of parent and then, with transform: translate() move it -50% of it's own size X and Y

score 0 · Answer 2 · answered Jan 19 '22 at 05:48

You need to give a height to body.
If parent div has a position relative then for setting div according to parent you should give a child div to position absolute.

   * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        
        html {
            font-size: 62.5%;
        }
        
        body {
            background-image: url("wallpaper.png");
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            top: 0px;
            height: 100vh;
        }
        
        .container {
            background-color: lightgray;
            opacity: 50%;
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
        }

<div class="container">
    <div class="container-name"></div>
     <div class="container-stats"></div>
</div>

score 0 · Answer 3 · answered Jan 19 '22 at 07:13

HTML:

<div class="wrap-center">
    <div class="container">
            <div class="container-name"></div>
            <div class="container-stats"></div>
    </div>
</div>

CSS:

.container {
    background-color: lightgray;
    opacity: 50%;
    width: 200px;
    height: 200px;
}

.wrap-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 500px;
}

CSS Vertically position an image

3 Answers3