Simple way to make text center to the div using css3

Today i'm going to tell you one small trick to make text center in div by vertically and horizontally. here i'm going to make the texts center of the div using css3 transform code. lets see the simple code below.

LIVE DEMO

HTML CODE

<div class="small-container">
    <span>Text centered</span>
</div>

Here that small-container is the class. we are going to make center inside the div. i'm using both div and text center of the browser so i have used two transform for small-container and small-container span.

If you want only text center, just use small-container span css.

CSS CODE

.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

I hope this tip is really useful for designing. this is highly using in advertise here text centering. thanks for visiting. check the demo link to center the text in div tag.

RELATED POSTS :
Chage color to black and white image usinf css
Change text & background color while selecting text using CSS3
Create custom file chosen input type using Css and Jquery
Rotate image on hover using CSS3
Image zoom on hover using css3
Place the Text on image using CSS
How to make fixed background image for all browser using Css
Simple blinking effect using css3 and Jquery
Simple animated moving background images using CSS3 with Keyframes