CODEWITHSUNDEEP
css
X10nD
X10nD

Reputation: 22050

center a div box in the middle of the page using css

I want to center a div right in the middle of the page, I tried top:30%, but when the window is resized off the alignment.

<div id=cent></div>

Thanks Jean

Upvotes: 13

Views: 107614

Answers (11)

naivists
naivists

Reputation: 33551

Disclaimer: This answer is outdated, definitely use flex. See @alephao's answer below.

If you know the height/width of that div (for instance, it will be 100px X 200px) then you can do it like this:

#cent {
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px; /* this is half the height of your div*/  
  margin-left:-100px; /*this is half of width of your div*/
}

UPDATE: another option: see http://www.w3.org/Style/Examples/007/center (Centering vertically)

Upvotes: 18

AliReza Abbasian
AliReza Abbasian

Reputation: 75

The following code works for me:

#cent {
        height: 600px;
        display: table-cell;
        vertical-align: middle;
        width: inherit;
    }

Upvotes: 0

Antsamotady
Antsamotady

Reputation: 66

I tried @alephao's answer and wasn't enough cause the div stood at the top.
So I made this one which works for me:

#cent {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 25vh;
}

Hope this is what you search for.

Upvotes: 0

alephao
alephao

Reputation: 1273

I know this question is pretty old, but I stumbled upon it, and I'll probably look for it again in the future.

In my case, the content has a variable height, and I don't want to use absolute positioning, so I used a flexbox container instead. You just need to wrap your content inside a div with the following style:

.container {
  min-height: 100vh; /* minimum height = screen height */
  display: flex;
  justify-content: center;
  align-items: center;
}

Example: https://codepen.io/alephao/pen/mdPRYqZ

Upvotes: 9

edoriggio
edoriggio

Reputation: 331

I know this question is 9 years old, but having stumbled upon it 9 years later, maybe someone else could do the same.

This is my working solution:

#cent {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

By doing this it will set the width and height to 500px, then it will set the top, left, right and bottom constraints to 0, and finally, by setting the margins to auto, the box will be put in the exact middle of the window. This will also be responsive.

Upvotes: 3

Dumitru Daniel
Dumitru Daniel

Reputation: 549

HTML:

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

CSS:

#box{
background-color: green;
width:100px;
height:100px;
margin:auto; /*This will center it horizontally but not vertically*/
}

Watch out of the quotes or double quotes around the id "box", you need them.

Upvotes: 1

Matthy Playz
Matthy Playz

Reputation: 15

If you want the top middle:
HTML:

<div class="cent">
  <!-- code -->
</div>

CSS:

.cent {
  align: center;
}

and if you want direct middle, use the same HTML but change the CSS to:

.cent {
  align: center;
  position: absolute;
  top: 40%;
  left: 45%;
}

Example Code: jsfiddle.net/Lzdvnk29 (it may not look centered if you
look at it, but if it is a full HTML page it will show in the direct middle)

Upvotes: 0

Hobby99
Hobby99

Reputation: 703

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

Upvotes: -1

Sergio Tapia
Sergio Tapia

Reputation: 41218

Here's how:

#cent
{
    margin-left:50px;
    margin-right:50px;
}

Now your div is going to be 50px from left and right and centered in whatever container you have it in.

Upvotes: -1

syockit
syockit

Reputation: 5834

Adding notes to naivists' link (to w3c tips site): display:table-cell does not work with height:100%. So, if you want to vertically center an element, which you don't know its height, on a page, you need to put it inside a container with display:table and height:100%, and another container with display:table-cell and vertical-align:middle.

Furthermore, if you want to center it horizontally, you need to specify width:100% to body, the outer container, and give text-align:center to inner container. The content should have display:inline-block, and to reset alignment, text-align:left.

Ultimately, it becomes as follows:

<style>
#vcontainer {
  display: table;
  height: 100%;
  width: 100%;
}
#hcontainer {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#content {
  display: inline-block;
  border: lightGray 1px solid;
  background-color: lightBlue;
  text-align: left;
}
</style>
<body>
  <div id="vcontainer"><div id="hcontainer">
    <div id="content">
      Hoyjo!<br>
      I have returned to my hometown!<br>
      Lolololo lololo lololo lololo lololo!<br>
    </div>
  </div></div>
</body>

I cannot guarantee it will work on legacy browsers (IE6/7). It will work on IE8 provided it runs on IE8 standards (yes, this will screw your mind. Thanks, MS!), and you must give <html> and <body> the height:100%.

Upvotes: 1

SpikETidE
SpikETidE

Reputation: 6961

 <div id="content"
                 style="text-align: center;
                 vertical-align: middle;
                 border-color: #000000;
                 border-width: 1px;
                 border-style: solid;
                 margin-top: 25%;
                 margin-bottom: 25%;">
                hi
            </div>

This worked for me...

Edit : This will align the whole div... regardless of the size of the div or the page... Assuming that this id the only div in the whole page...

Upvotes: 0

Related Questions