Why my overlay div is not centering

Question

I am sure it is a "simple" for the pros:

I am at lost on how to center (horizontally and vertically) the overlay to its parent. Please see the jsfiddle link for the details.

Thank you in advance for your time...

LB

<div class="grandparent">
    <div class="parent">
        <!-- 1st row */ -->
        <div class="child">1-1</div>
        <div class="child">1-2</div>
        <div class="child">1-3</div>

        <!-- 2nd row */ -->
        <div class="child">2-1</div>
        <div class="child">2-2</div>
        <div class="child">2-3</div>

        <!-- 3rd row */ -->
        <div class="child">3-1</div>
        <div class="child">3-2</div>
        <div class="child">3-3</div>


        <div class="overlay">
            Overlaysdfds 
            line2sdf sdfdsf sdfsdf sfdsdf
            <P />line 3
         </div> 

    </div>


</div>

and the CSS:

<style>
.grandparent {
    posttion: relative;
    height: 100%;
    width:100%;
    max-width:600px;

    margin: 0 auto;
    text-align:center;
    border: 1px solid green;
    overflow: hidden;
}

.parent {
    width: 75%;
    height: 75%;
    margin: auto;
    border: 1px solid blue;
    text-align: center;
    padding:20px;
    verflow:hidden;
}
.parent:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.child {
    posttion: relative;
    float:left;
    width: 30%;
    padding-bottom: 22%; 
    margin:1.66%;
    background-color: #1E1E1E;
    color: #ffffff;
}

.overlay {
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
    color: white; background: #666666; opacity: .8;
    z-index: 1000;
}
<style>

Here is the link to the example

http://jsfiddle.net/lb6688/aj7udvsq/3/

Again, appreciate your time!!!

I'm surprised by the number of times that this same question is asked on Stack Overflow and how people still ask it. It proves little to no research before posting. If you search on Google "stack overflow center element vertically and horizontally" (without the quotes), you get over 1.5 million results! And it would have taken less time that posting the question and creating the fiddle... shrug — Alvaro Montoro, Sep 28 '14 at 21:11
How is it different? The answers that you got for this question work for your problem, and they are the same as the ones in the question that Hashem suggested (e.g.: http://stackoverflow.com/a/25776315/3695983). Your code may be different, but the essence of the problem is exactly the same. — Alvaro Montoro, Sep 29 '14 at 01:27

score 5 · Accepted Answer · answered Sep 28 '14 at 21:01

5

Use transform:translate(-50%, -50%) to center the element within the parent (instead of hard coding values for the margin-top and margin-left):

.overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white; background: #666666; opacity: .8;
    z-index: 1000;
}

See it working here: http://jsfiddle.net/aj7udvsq/4/

answered Sep 28 '14 at 21:01

Alvaro Montoro

28,081
7
57
86

Thanks for helping and your comments. I need the overlay vertically centered within it's parent. Any suggestions? – Little Brother Sep 29 '14 at 14:13
I do appreciate your help !!! – Little Brother Sep 29 '14 at 14:15
@LittleBrother: Add `position:relative;` to the parent along with the indicated `transform:translate(-50%, -50%);` in the overlay and it will work. Fixed the JSFiddle (I realized that there was some invalid styles: `posttion: relative;` or `verflow:hidden;`), and now it works the way it should: http://jsfiddle.net/aj7udvsq/6/ – Alvaro Montoro Sep 29 '14 at 14:23

score 0 · Answer 2 · answered Sep 28 '14 at 21:00

0

Look at the changes at the CSS: http://jsfiddle.net/csdtesting/w4boh5mg/1/

.overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
    color: white; background: #666666; opacity: .8;
}

  .parent {
    position: relative; /* or absolute */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

answered Sep 28 '14 at 21:00

Giannis Grivas

3,374
1
18
38

I need the overlay vertically centered within it's parent. I am always struggling with "centering" elements – Little Brother Sep 29 '14 at 14:14

Why my overlay div is not centering

2 Answers2