How to Center Content that has a Z-Index

Question

I'm trying to center all my content by using a div, but every time I use a center code my content completely goes askew.

I tried using this code

position: relative;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;

But that causes my content to snap to the far right. I'm not sure what I'm doing wrong but it might have something to do with my class styles.

Here's a part of the code I'm using. I'm making a website for my class!

CSS:

.centercontent {
    position:relative;
    max-width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
}

.front {
    position:absolute;
    top: 50px;
    left:800px;
    z-index: 2;
}

HTML:

<div class="centercontent">
  <img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" />
</div>

I think using Z-index is causing the code to act wonky, but I have to use the Z-Index to align all the pieces in my total code. If it's not the Z-Index, then I have no idea what could be wrong.

My end goal is to have the content be centered no matter what size computer its being viewed on. I want the images to be the same scale not matter how big the computer is and if the computer is smaller, have the images be smaller. And no matter what, it'll stay centered on the screen.

Any help is greatly appreciated!

score 2 · Answer 1 · answered Apr 29 '19 at 13:50

there is a lot of way to center things in css. you can see some tips and explication here : tips to center z-index dont causing align bug :)

For you exemple, just add a transform: translate(-50%, -50%) to your container.

You can see your code with the modification just below

    .centercontent{
        position:absolute;
        max-width: 100%;
        height: auto;
        top: 50%;
        left: 50%;
        border:2px solid tomato;
        transform: translate(-50%, -50%);
    }

<!Doctype html>
<html>
<head>
</head>

<body>
<div class="centercontent">

<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >

</div>

</body>
</html>

score 0 · Answer 2 · answered Apr 29 '19 at 13:43

You need to give style to your main div, which is "centercontent" and remove additional styling from your image. So, your whole code will look like this.

<!Doctype html>
<html>
<head>

<style>
    .centercontent {
    text-align: center;
    position: relative;
    max-width: 100%;
    }
    .front {

        z-index: 2;
    }

</style>
</head>

<body>
<div class="centercontent">

<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >

</div>

</body>
</html>

score 0 · Answer 3 · answered Apr 29 '19 at 13:44

0

To center the container on any screen size you can use the following code.

.centercontent{
  margin: 0 auto;
  width:50%; // You can put any width to the container.
}

answered Apr 29 '19 at 13:44

Ernest

199
5

score 0 · Answer 4 · answered Apr 29 '19 at 13:45

What you've done is almost correct. But you've got muddled with your attempt to horizontally align objects.

The easiest way to horizontally align on a block level element:

text-align: center;

To vertically align:

position: relative;
top: 50%;
transform: translateY(-50%);

Here's a working example: https://jsfiddle.net/yorjk2h7/

score 0 · Answer 5 · answered Apr 29 '19 at 13:46

0

.centercontent{
    position:relative;
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
}
.front {
max-width: 100%;
z-index:2
}

hope this is what you need

answered Apr 29 '19 at 13:46

IbrahimHayek

36
3

score 0 · Answer 6 · answered Apr 29 '19 at 13:50

try this code in your css

.centercontent {
    max-width: 100%;
    height: auto;
  }

.front {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
  }

How to Center Content that has a Z-Index

6 Answers6