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:

<divstyle="text-align:center;vertical-align:middle;"><labelid="lblStatus"style="position: absolute; top: 50%;">Please wait...</label></div><divstyle="text-align: center;"><buttonid="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:

<divstyle="text-align:center; position: absolute;top:50%;width:100%;"><labelid="lblStatus">
        Please wait...
    </label></div><divstyle='text-align:center;position:absolute;bottom:0; width:100%;'><buttonid="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

<divstyle="position:absolute;top:0;bottom:0;right:0;left:0;text-align:center;overflow:hidden;white-space:nowrap;"><divstyle="position:relative;display:inline-block;height:100%;vertical-align:middle;"></div><divstyle="position:relative;display:inline-block;vertical-align:middle;">THISISCENTEREDONLYWITHCSS<br/>parent'sposition:absolute;isonlyanexample,itcanberelative<br/>MarceloVillarreal:D</div></div>