Is there a way to position a div directly in the center of it's parent?

Question

I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:

#box {
  width: 50%;
  #text {position: relative; margin-left: 48%;}
}

This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.

I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?

If #text has a width you can give it this style which should centre it within its parent - margin:0 auto; — Leo Farmer, Feb 09 '15 at 22:05
possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Zach Saucier, Feb 09 '15 at 22:45

score 1 · Answer 1 · answered Feb 09 '15 at 22:04

1

Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.

answered Feb 09 '15 at 22:04

Albert221

5,223
5
25
41

score 1 · Answer 2 · answered Feb 09 '15 at 22:06

1

First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:

CSS

body {
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#box {
    width:100%;
    height: 500px;
    background: lightblue
}
#test {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto
}

HTML

<div id="box">
    <div id="test">
        hello
    </div>
</div>

See the JS.Fiddle

answered Feb 09 '15 at 22:06

crazymatt

3,266
1
25
41

Like Leo mentions in the comments the margin: 0 auto is the key for the centering – crazymatt Feb 09 '15 at 22:07

score 1 · Answer 3 · answered Feb 09 '15 at 22:07

1

use margin: 0 auto; in the css of #text

answered Feb 09 '15 at 22:07

waipa mark

46
3

score 1 · Answer 4 · answered Feb 09 '15 at 22:27

You want exact center of page, regardless of content? Do something like this:

p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Relative to the parent, set the following attribute on the container for your element:

div.containerOfPs {
  position: relative;
}

Is there a way to position a div directly in the center of it's parent?

4 Answers4