How to make a vertically and horizontally centered boxed div container

Question

I am trying to make a horizontally and vertically centered div which does not have 100% width and height, but something like 80% both width and height. I just want to make kind of a box right in the center of the viewport. I am avoiding vh and vw units.

I found a solution like this :-

<div class="centered-box">
This is a box
</div>

And the CSS is

.centered-box {
 margin: auto;
 top:    0;
 left:   0;
 right:  0;
 bottom: 0;
 position: absolute;
 width: 80%;
 height: 80%;
 border: 1px solid black;
}

This works but when I use BootStrap3's .container class, this container misbehaves. The content also overflows. I think this is due to absolute positioning of the container. I just want a completely different concept. I dont want to use this method because of absolute positioning.

score 1 · Answer 1 · answered May 18 '16 at 14:52

1

Try this

<div class="centered-box">
This is a box
</div>

Css

.centered-box {
    margin: 10% auto;
    width: 35%;
    padding: 20px;
    border: 1px solid black;
}

answered May 18 '16 at 14:52

keziah

564
1
6
24

Advaith · Answer 2 · 2016-05-18T15:15:44.013

1

Html

<div class="outer">
   <div class="middle">
      <div class="inner">
         <div align="center">
            <h1>The Content</h1>

            <p>Once upon a midnight dreary...</p>
         </div>
      </div>
   </div>
</div>

Css

.outer {
   display: table;
   position: absolute;
   height: 100%;
   width: 100%;
}

.middle {
   display: table-cell;
   vertical-align: middle;
}

.inner {
   margin-left: auto;
   margin-right: auto; 
   width: /*whatever width you want*/;
}

edited May 18 '16 at 15:15

answered May 18 '16 at 15:04

Advaith

2,490
3
21
36

but will this work with bootstrap grid layout as well? – Umar May 21 '16 at 10:16
thanks a lot it works perfectly, with bootstrap as well. – Umar May 21 '16 at 11:02

score 0 · Answer 3 · answered May 18 '16 at 15:03

0

Center div it's always a pain in the a**. I found this very usefull site: http://howtocenterincss.com/

Give it a try. You had tio answer very simple question about what you wont to center.

answered May 18 '16 at 15:03

Argo

326
3
14

How to make a vertically and horizontally centered boxed div container

3 Answers3