How to center div the whole screen page using css

Question

I have got below div in my html and it has a label in it.

<div id="divInvalid" runat="server">
        <asp:Label ID="lblInvalidUser" class="error" runat="server"></asp:Label>
</div>

Now I want to put css on the DIV or Label show it will appear to middle of page.

Please suggest!!

possible duplicate of [center a div box in the middle of the page using css](http://stackoverflow.com/questions/2498003/center-a-div-box-in-the-middle-of-the-page-using-css) — Quentin, Feb 08 '12 at 10:02
What if we do using jquery http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen — Manoj Singh, Feb 08 '12 at 10:22

score 0 · Accepted Answer · answered Feb 08 '12 at 09:52

0

try :

<div id="divInvalid" runat="server" style="text-align:center;">
        <asp:Label ID="lblInvalidUser" class="error" runat="server"></asp:Label>
</div>

answered Feb 08 '12 at 09:52

Royi Namir

131,490
121
408
714

width should be 100% `style="text-align:center;width:100%"` – mgraph Feb 08 '12 at 09:53
@mgraph div is 100% width by **default** ! – Royi Namir Feb 08 '12 at 09:54
But I want my label to the center of the page, above code only puts its center but at the top of page only – Manoj Singh Feb 08 '12 at 09:56
@m.s. you should **write** these things ! we are not supposed to guess that ! for your question - you will need **JavavScript** or you should use a `table` with `td` which has **Vertical-align:middle** – Royi Namir Feb 08 '12 at 09:59
sorry any examples, as this message comes first on the page get loaded and this showing and hiding the above label is done through c# code behind. Please suggest! – Manoj Singh Feb 08 '12 at 10:01

score 0 · Answer 2 · answered Feb 08 '12 at 09:52

0

try this:

#divInvalid{margin:0 auto;width:1024px;}

answered Feb 08 '12 at 09:52

Sandor Farkas

1,191
3
17
37

score 0 · Answer 3 · answered Feb 08 '12 at 09:54

0

Give display:inline-block to label

#divInvalid{
 text-align:center
}

label{display:inline-block;text-align:left;}

answered Feb 08 '12 at 09:54

sandeep

85,904
23
131
151

@RoyiNamir; check this http://stackoverflow.com/questions/7279294/how-do-i-center-an-inline-block-floated-header-with-no-extra-markup/7279451#7279451 – sandeep Feb 08 '12 at 10:06
I dont know what youre talking about but to center a span in div you dont have to make it display inline-block... inline is enough.http://jsfiddle.net/vpcXS/3/ – Royi Namir Feb 08 '12 at 10:09
may be you have to check this link to understand why i use inline-block instead of inline http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block – sandeep Feb 08 '12 at 10:15

score 0 · Answer 4 · answered Feb 08 '12 at 10:01

0

Give the div an exact size 950, 1000, 1050... and then put in the CSS :

margin:0 auto; width: ...;

This should fix the problem.

answered Feb 08 '12 at 10:01

GeekMasher

994
2
10
17

#[name]{ margin:0 auto; width: ...;} (...): what ever size of div. – GeekMasher Feb 08 '12 at 10:04

score 0 · Answer 5 · edited Jul 25 '12 at 12:30

0

Try this

#divInvalid{
  margin:0 auto;
  width:1024px;
}

#divInvalid label{
  height:80px; width:200px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-40px 0 0 -100px;
}

edited Jul 25 '12 at 12:30

iblue

26,668
17
81
125

answered Feb 08 '12 at 10:26

Abhidev

6,413
5
18
25

How to center div the whole screen page using css

5 Answers5