Search code examples
csstextcentering

CSS to always center text in a page


I am trying to add text to center of the page. Even if a user try to resize the page, text in the page should be aligned to center. I am close to the solution but missing some position in the code. Here is my code. Any help would be highly appreciated.

html code

<div class="errorMessageContainer">

    <div class="errorMessageIcon">
        :(
    </div>
    <div class="errorMessageHeaderContainer">
        <div class="errorMessageHeader">
            I am trying to center me in a page.
        </div>
        <div class="errorMessageText">
            <span class="errorMessageSubHeader">I want to float.</span>Even if page is restored or forced minimized. <span class="errorContact"><a href="#">Please </a></span> help me on this.
        </div>
    </div>
</div>

css code

  body {
        background-color: #666666;
    }

    .errorMessageContainer {
        width: 620px;
        margin: 200px 0 0 300px;

    }

    .errorMessageIcon {
        font-family: Segoe UI Semibold;
        font-size: 72px;
        color: #29abe0;
        display: inline-block;
        vertical-align: top;
    }

    .errorMessageHeaderContainer {
        display: inline-block;
        width: 500px;
        padding: 20px 0 0 30px;
    }

    .errorMessageHeader {
        font-family: Segoe UI Light;
        font-size: 28px;
        color: #ffffff;
    }

    .errorMessageSubHeader {
        font-weight: bold;
    }

    .errorMessageText {
        font-family: Segoe UI;
        font-size: 13px;
        color: #ffffff;
        width: 450px;
    }

    .errorContact a {
        color: #ffffff;
        text-decoration: underline;
    }

Solution

  • this will put your message container in center of the page :

    .errorMessageContainer {
        width: 620px;
        height: 100px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -310px;       
        margin-top: -50px;       
    }
    

    see the fiddle