How should i center exactly a div both vertically and horizontally?

Question

I'm big newbie in CSS, but i tried different things, but I just can't get my div to be centered vertically.

Parent :

#ModalScroll{
    position:absolute;
    top:0;
    left:0;
    z-index:1001; 
    height:1px;
    width:1px;
    overflow:hidden;
    display:none;
    font-size:100%;
    text-align:left;
}

Child :

.ModalDialog{
    border:1px solid #3C4749;
    background-color:#FFF;
    margin:0 auto 0 auto;
    display:none;
    font-size: 12px;
    box-sizing: border-box; 
    width: 280px;
    height: 160px; 
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -80px 0 0 -140px;
}

I don't know if a solution in jQuery should be better, but I would prefer one in CSS.

http://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically hope this helps — Tommy Jinks, Apr 15 '15 at 09:32
possible duplicate of [How to put a div in center of browser using CSS?](http://stackoverflow.com/questions/1040554/how-to-put-a-div-in-center-of-browser-using-css) — Alexei Darmin, Apr 15 '15 at 09:34

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

Have you used firebug in order to be sure that your css is fully used ? (maybe an other CSS overloads some attributes of your item...)

position:absolute; /*it can be fixed too*/
left:0; right:0;
top:0; bottom:0;
margin:auto;

should do the trick (as said in Center a DIV horizontally and vertically) maybe try to add "!important" to each attribute...

EDIT : here is the css with "!important" mark :

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

edited May 23 '17 at 11:43

Community

1
1

answered Apr 15 '15 at 09:43

Random

3,158
1
15
25

When i check with firebug, i got this : http://i.imgur.com/HtmLTsT.png i want to delete that yellow rectangle. And have the dialog box in its position instead. – redAce Apr 15 '15 at 13:03
on firebug, on the left, you got a "style" block, and you see what style is exactly applied to your element. Isn't the "margin: auto" stripped or something else ? You got in your HTML a "left", "top", "margin-top" that should be removed to get the proper result... can you make a screenshot when you remove those ? – Random Apr 15 '15 at 13:15
I got an element.style that overrides my css, since it's an existing application. And the dialog box is used by many modules, how can i override this but just for this class ? I don't want to mess with other element.style – redAce Apr 15 '15 at 13:35
you can add "!important" in your css. that says "don't override this attribute". so, for instance, in your css, put 'margin:auto !important;' (I edited the answer) – Random Apr 15 '15 at 13:40
by the way, "element.style" means it's the attribute put in your HTML that overrides HTML (the << style="width:500px [...]" >>), don't you have a hand on the HTML code and remove the unwanted style ? – Random Apr 15 '15 at 13:54
Unfortunately I can't change the html, but thanks man, it solved one of my many problems. I still have to figure out what shift my parent div when i'm on some modules. – redAce Apr 15 '15 at 15:43
One last thing, is it possible to define a "left" value in css that equals the center of any screen resolution but only using CSS? I don't want to hardcode it. – redAce Apr 15 '15 at 15:45
not really, but if you do so, the div won't be centered, since its "left border" will be at the center, so the div will be on the right side of the screen... You have to use auto to be "responsive" to any screen resolution. Otherwise you have to put some JS/jQuery and change the left attribute at the document.ready according to the screen resolution... – Random Apr 15 '15 at 15:51

score 1 · Answer 2 · answered Apr 15 '15 at 09:47

1

try this:

HTML

<div class="divContent">
    content goes here
</div>

Css

.divContent {
    width: 200px;
    height: 300px;
    border: 1px solid red;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

answered Apr 15 '15 at 09:47

Aru

1,840
1
12
15

another method:- .divContent { display: table-cell; text-align: center; vertical-align: middle } – Aru Apr 15 '15 at 09:50

score 1 · Answer 3 · answered Apr 15 '15 at 10:24

Here is code for your question,

HTML code :

<div class="maindiv">
    <p class="hdiv">JSFIDDLE V</p>
</div>
<br>
<div class="maindivh">
    <p class="hdih">JSFIDDLE H</p>
</div>

CSS code :

.maindiv {   position:relative; border:1px solid #cfcfcf; height:50px; width:200px; }

.hdiv {width:200px; text-align:center; height:50px;}

.maindivh { position:relative; border:1px solid #cfcfcf; height:150px; width:200px; }

.hdih { vertical-align:middle; display:table-cell; line-height:150px; text-align:center; width:200px; }

demo

How should i center exactly a div both vertically and horizontally?

3 Answers3