Vertically center div using css3

February 10, 2015
by Inaam Hussain

In this tutorial will learn how to center div,span or any element vertically using css3 in just few lines of code.

For align center we are using transform translate css property. see below image, you can see Main grey div in which one green div is align vertically centered.

vertical align center

vertical align center

So, lets start with css,

CSS
.Vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%); /* For mozilla support */
    -webkit-transform: translateY(-50%); /* For safari support */
    -ms-transform: translateY(-50%); /* For IE support */
    -o-transform: translateY(-50%); /* For opera support */
}

By applying position relative , top and transform we can easily align vertically centered.

See full code with HTML & CSS

HTML & CSS
<html>
<head>
 <title>Div Align vertically center</title>
 <style>
.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}
.Vertical-center {
    background: none repeat scroll 0 0 #1fa67a;
    color: #ffffff;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
 </style>
</head>
<body>
    <div class="main-div">
        <div class="Vertical-center">
            <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
        </div>
    </div>
</body>
</html>

Hope this tutorial is helpful for you.

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment