Make a div inside Div - in the middle

Question

I am trying to make a div inside another one exactly in the middle. Is there any better way to do that?

body, html
{
    margin:0;
    height:100%;
}

#master_wrapper
{
    width:100px;
    height:100px;
    background:#57a957;
}

#header
{
    left:50%;
    width:50%;
    height:50%;
    background:red;
}

<div id="master_wrapper">
<div id="header">
    Header
</div>

http://jsfiddle.net/uba1wr52/

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — The Pragmatick, Jan 26 '15 at 09:05
This question gets posted everyday. Please refer to Google before asking. — , Jan 26 '15 at 09:15

score 0 · Answer 1 · edited Jul 26 '15 at 19:18

0

margin: 0 auto;

This will automatically horizontally center your div with top and bottom margin of 0; You can also do:

margin: 0 auto 0 auto;

In order to control top and bottom margins, margin values go like:

margin: top right bottom left;

edited Jul 26 '15 at 19:18

kosmos

4,253
1
18
36

answered Jan 26 '15 at 09:09

Rastko

477
2
7

score 0 · Answer 2 · edited Jul 26 '15 at 20:04

0

width: 100%;          // can be in pixels also.  
margin: 0 auto;

edited Jul 26 '15 at 20:04

kosmos

4,253
1
18
36

answered Jan 26 '15 at 09:09

ozil

6,930
9
33
56

score 0 · Answer 3 · edited Jul 26 '15 at 20:05

Try with padding: http://jsfiddle.net/5oxg9aay/1/

body, html {
    margin: 0;
    height: 100%;
}

#master_wrapper {
    width: 58px;
    height: 58px;
    background: #57a957;
    padding: 4%;
}

#header {
    background: red;
    width: 100%;
    height: 100%;
}

or use a position: absolute; in the header and work with left/right/top/bottom but you need to make #master_wrapper the mother container for #header.

score 0 · Answer 4 · answered Jan 26 '15 at 09:15

0

You can make the inner div exactly in the middle by adding style "margin: 0px auto" to the #header in the css file.

answered Jan 26 '15 at 09:15

Mohit Kumar

1

Sergiu Gordienco · Answer 5 · 2015-01-26T10:33:09.307

An example how to place a HTML Element in the middle horizontal and vertical

<!DOCTYPE html>
<html>
    <head>
        <title>Div in middle</title>
    </head>
    <body>
        <div style="
                    background: red;
                    width   : 300px;
                    height  : 100px;
                    ">
            <div style="
                        background  : #fff;
                        width   : 123px;
                        height  : 67px;
                        margin  : 0 auto;
                        position: relative;
                        top     : 50%;
                        transform   : translateY(-50%);
                        ">
                Div in middle of other div
            </div>
        </div>
    </body>
</html>

You can test in live editor if you want

score 0 · Answer 6 · answered Jan 26 '15 at 10:06

Just so you know, a lot of your css is pointless/redundant since you've not set your positioning of your classes. I.e. to use top:... left:... right:... and/or bottom:... you need to have set your positioning to absolute;

The snippet below allows you to horizontally and/or vertically center your div element:

html,
body {
  padding: 0;
  margin: 0;
}
#master_wrapper {
  width: 100px;
  height: 100px;
  background: #57a957;
  position: relative;
}
#header {
  position: absolute;
  width: 50%;
  height: 50%;
  background: red;
  
  
  margin:0 auto; /*horizontally center*/
  left:0;
  right:0;
  
  
    -webkit-transform: translateY(50%); /*vertically center*/
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

<div id="master_wrapper">
  <div id="header">
    Header
  </div>

Make a div inside Div - in the middle

6 Answers6