CODEWITHSUNDEEP
javascriptcsshtml
sumit
sumit

Reputation: 11277

Positioning <div> element at center of screen

I want to position a <div> (or a <table>) element at the center of the screen irrespective of screen size. In other words, the space left on 'top' and 'bottom' should be equal and space left on 'right' and 'left' sides should be equal. I would like to accomplish this with only CSS.

I have tried the following but it is not working:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Note:
It is either way fine if the <div> element (or <table>) scrolls with the website or not. Just want it to be centered when the page loads.

Upvotes: 197

Views: 683051

Answers (14)

user187676
user187676

Reputation:

Set the width and height and you're good.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

If you want the element dimensions to be flexible (and don't care about legacy browsers), go with XwipeoutX's answer.

Upvotes: 44

Nishan
Nishan

Reputation: 4441

Now you can do this using grid layout with fewer lines of code.

.center-this{
  display: grid;
  place-items: center;
  align-content: center;
}
<div class="center-this">
  <div>
    Hello
  </div>
</div>

Upvotes: 4

Daniel De Le&#243;n
Daniel De Le&#243;n

Reputation: 13679

Now, is more easy with HTML 5 and CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

Upvotes: 28

reddtoric
reddtoric

Reputation: 686

Alternative solution that doesn't use position absolute:
I see a lot of position absolute answers. I couldn't use position absolute without breaking something else. So for those that couldn't as well, here is what I did:
https://stackoverflow.com/a/58622840/6546317 (posted in response to another question).

The solution only focuses on vertically centering because my children elements were already horizontally centered but same could be applied if you couldn't horizontally center them in another way.

Upvotes: 0

Caner
Caner

Reputation: 59308

Use flex. Much simpler and will work regardless of your div size:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Upvotes: 21

Eduardo Lago Aguilar
Eduardo Lago Aguilar

Reputation: 783

I would do this in CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

then in HTML:

<div class="centered"></div>

Upvotes: 8

luminousmen
luminousmen

Reputation: 2169

It will work for any object. Even if you don't know the size:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 46

Pavel Shorokhov
Pavel Shorokhov

Reputation: 4994

Another easy flexible approach to display block at center: using native text alignment with line-height and text-align.

Solution:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

And html sample:

<div class="parent">
  <div class="child">My center block</div>
</div>

We make div.parent fullscreen, and his single child div.child align as text with display: inline-block.

Advantages:

  • flexebility, no absolute values
  • support resize
  • works fine on mobile

Simple example on JSFiddle: https://jsfiddle.net/k9u6ma8g

Upvotes: 0

XwipeoutX
XwipeoutX

Reputation: 4965

With transforms being more ubiquitously supported these days, you can do this without knowing the width/height of the popup

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Easy! JSFiddle here: http://jsfiddle.net/LgSZV/

Update: Check out https://css-tricks.com/centering-css-complete-guide/ for a fairly exhaustive guide on CSS centering. Adding it to this answer as it seems to get a lot of eyeballs.

Upvotes: 219

Christopher Atwood
Christopher Atwood

Reputation: 11

If there are anyone looking for a solution,

I found this,

Its the best solution i found yet!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Hope you enjoy!

Upvotes: 0

Dali
Dali

Reputation: 31

try this

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Or this

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

Upvotes: 1

user3423956
user3423956

Reputation: 35

try this:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

Upvotes: -2

elclanrs
elclanrs

Reputation: 94131

If you have a fixed div just absolute position it at 50% from the top and 50% left and negative margin top and left of half the height and width respectively. Adjust to your needs:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

Upvotes: 14

einstein
einstein

Reputation: 13850

The easy way, if you have a fixed width and height:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.

Upvotes: 260

Related Questions