Align Text In Middle/center Of Page And Button On Bottom/center

I am trying to put a label in middle/center part of the page and button at bottom/center part of the page but struggling. The jsfiddle for this Below is the HTML code snippet, <

Solution 1:

This should work:

<div style="text-align:center;vertical-align:middle;">
    <label id="lblStatus" style="position: absolute; top: 50%;">Please wait...</label>
</div>
<div style="text-align: center;">
    <button id="btnClose" value="Close" style="position:absolute; bottom:0; text-align:center; width:80px">A button</button>
</div>

Here's a jsfiddle.

Solution 2:

HTML:

<div id="labelHolder">
    <label id="lblStatus">Please wait...</label>
</div>

<button id="btnClose" value="Close" onclick="window.close();"></button>

CSS:

#labelHolder {
    text-align:center;
    vertical-align:middle;
}

#labelHolder #lblStatus {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
}

#btnClose {
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-40px;
    text-align:center;
    width:80px
}

jsfiddle: http://jsfiddle.net/98vLu/

Solution 3:

For vertical center alignment, you will have better height control by using display: table-cell.

For Example: http://jsfiddle.net/Ljht7/8/

Solution 4:

<div style="text-align:center; position: absolute;top:50%;width:100%;">
    <label id="lblStatus">
        Please wait...
    </label>
</div>

<div style='text-align:center;position:absolute;bottom:0; width:100%;'>
<button id="btnClose" value="Close" onclick="window.close();" style=" bottom:0; text-align:center; width:80px"></button>

jsfiddle

Adding position:absolute; gives a lot of flexibility when trying to position something.

Solution 5:

This is it ... simple, standard and clean ... no scripts, no fixed sizes ...

Try this for both ... this is a standard solution to center an element vertically/horizontally ... you could use it for the "please wait" and us a relative text centered div for the button ... good luck

<div style="
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
text-align: center;
overflow: hidden;
white-space: nowrap;">
    <div style="
        position: relative;
        display: inline-block;
        height: 100%;
        vertical-align: middle;"></div>
    <div style="
        position: relative;
        display: inline-block;
        vertical-align: middle;">
THIS IS CENTERED ONLY WITH CSS<br/>
parent's position: absolute; is only an example, it can be relative<br/>
Marcelo Villarreal :D</div>
</div>