Aligning Div To Middle?

Question

Hello my question is about aligning divs. On a website i am working on for fun i have a div and inside that div is a child div. i need the child to be in the middle of the adult div. The left and right are aligning in the middle but it is stuck to the top. If anyone could help me that would be greatly appreciated!

JSFIDDLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title></title>
</head>
<body>
    <div id="container">
        <div id="logo">
        </div>
        <div id="nav">
        </div>
        <div id="content-background">
            <div id="content">
            </div>
        </div>
        <div id="faqs">
        </div>
        <div id="footer">
            <div id="footer-right">
            </div>
            <div id="footer-left">
            </div>
            <div id="footer-bot">
            </div>
        </div>
    </div>
</body>
</html>






* {
    margin: 0px;
    padding: 0px;
}

#container {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    width: 25%;
    height: 50px;
    float: left;
    background-color: red;
}

#nav {
    width: 75%;
    height: 50px;
    float: left;
    background-color: green;
}

#content-background {
    width: 100%;
    height: 600px;
    clear: both;
    background-image: url('images/background.jpg');
}

#content {
    width: 50%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
}

#faqs {
    width: 100%;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
}

#footer {
    width: 100%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

#footer-right {
    width: 50%;
    height: 150px;
    float: left;
    background-color: blue;
}

#footer-left {
    width: 50%;
    height: 150px;
    float: left;
    background-color: pink;
}

#footer-bot {
    width: 100%;
    height: 50px;
    clear: both;
    background-color: green;
}

" have a div and inside that div is a child div." - there are many divs in your code as well as in fiddle. please be specific. — T J, Jun 26 '14 at 06:47

score 0 · Accepted Answer · edited May 23 '17 at 10:26

0

It seems you want to align the div vertically to the middle as well as horizontally. The child div looks good horizontally, but aligning to the center vertically is a bit trickier.

An easy solution since you know the height of #content-background would be to position #content relative to the parent and then move it down by 150 pixels.

#content {
    ...
    position: relative;
    top: 150px;
}

Here's a working fiddle http://jsfiddle.net/ry5xU/3/

Here's a really good breakdown of how you can accomplish true vertical centering: How to vertically center divs?

edited May 23 '17 at 10:26

Community

1
1

answered Jun 26 '14 at 06:43

stroz

1,890
1
16
28

"It seems you want to align the div vertically" - how did you concluded which is *the div* to be aligned from question..? – T J Jun 26 '14 at 06:50
"The left and right are aligning in the middle but it is stuck to the top." If you look at the attached fiddle, the #content div is aligned center but stuck to the top. – stroz Jun 26 '14 at 07:02
The question by itself is unclear. the fiddle is just an aid. *Questions without a clear problem statement are not useful to other readers*. if the fiddle goes down, then the question is unclear and useless. – T J Jun 26 '14 at 07:08

score -1 · Answer 2 · edited May 23 '17 at 12:05

-1

You can use margin:auto to show a div at center.

Check out this and this or this might help.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 26 '14 at 06:41

gprathour

14,813
5
66
90

score -1 · Answer 3 · answered Jun 26 '14 at 06:43

-1

#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}

you should do this for your css. when the width and height of your child div is 400px , in "margin-right" or "margin-top" you write -200px on them . It means the half of width with a Minus behind that should be in "margin-right" and the half of height with a Minus behind that should be in "margin-top". Good luck .

answered Jun 26 '14 at 06:43

Majid

13
6

where is `#main_div` and `#child_div` in the shared code..? – T J Jun 26 '14 at 06:48
It's an example. you said a div and inside that a child div. – Majid Jun 26 '14 at 06:50
Well, then your example is unclear. *you should do this for your css* - adding the the above code won't fix the issue since there are no elements with such `id`s. btw i'm not the op. – T J Jun 26 '14 at 06:52
tell me which part of that is unclear that I'll explain it to you. – Majid Jun 26 '14 at 06:57
*you should do this for your css* - adding the the above code won't fix the issue since there are no elements with such `id`s. – T J Jun 26 '14 at 07:03

Aligning Div To Middle?

3 Answers3