How do I center this div vertically as well as horizontally?

Question

I want the div to sit in the middle of the page vertically as well as horizintally. Im looking for a css solution. I took out the margin and margin-top because they messed with the header I have.

/* CSS */

.mainDiv {
  background: #fff;
  padding: 20px;
  width: 450px;
  margin: auto;
  /*margin: 0px auto;
  margin-top: 200px;*/
  box-shadow: 0 0 20px #333;
}

<!-- HTML -->

<div class="mainDiv" align="right">
  <h1 align="left">Firebase Web App</h1>
  <textarea placeholder="Enter text here ..."></textarea>
</div>

FIDDLE

https://jsfiddle.net/gy0Lr6rg/

Just one word: flexboxes. (I leave the chance to answer this question to someone else) — Bálint, Nov 16 '16 at 08:47
This can help you http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally?rq=1 — Alexis, Nov 16 '16 at 08:47
Same question -> [how-to-vertically-center-a-div-for-all-browsers](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Jones Joseph, Nov 16 '16 at 08:49

score 2 · Accepted Answer · edited Nov 16 '16 at 09:41

Try out flexboxes:

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.mainDiv {
    background: #fff;
    padding: 20px;
    width: 450px;
    /*margin: auto;
    /*margin: 0px auto;
    margin-top: 200px;*/
    box-shadow: 0 0 20px #333;
}

<div class="flex-container">
    <div class="mainDiv" align="right">
        <h1 align="left">Firebase Web App</h1>
        <textarea placeholder="Enter text here ..."></textarea>
    </div>
</div>

score 0 · Answer 2 · answered Nov 16 '16 at 08:49

0

Try surrounding the div with another div and use height: 100%; on it. It worked in some cases for me. But it will not work in jsfiddle, because the height is not big enough. You can also try using the height: 100%; on your body tag

answered Nov 16 '16 at 08:49

jenald

132
2
8

score 0 · Answer 3 · answered Nov 16 '16 at 08:51

.mainDiv {
  background: #fff;
  padding: 20px;
  width: 450px;
  height:150px;
  margin-left: -225px;
  margin-top:-75px;
  /*margin: 0px auto;
  margin-top: 200px;*/
  box-shadow: 0 0 20px #333;
  position:absolute;
  top:50%;
  left:50%;
}

<div class="mainDiv" align="right">
    <h1 align="left">Firebase Web App</h1>
    <textarea placeholder="Enter text here ..."></textarea>
  </div>

How do I center this div vertically as well as horizontally?

3 Answers3