CSS Vertical Centering

Centering with display: table
HTML:
<div class="wrapper">
<div class="outer">
<div class="inner">
centered
</div>
</div>
</div>
CSS:
.wrapper {
height: 600px;
text-align: center;
}
.outer {
display: table;
height: 100%;
width: 100%;
}
.outer .inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Centering with Flexbox
HTML:
<div class="container">
<div class="child"></div>
</div>
CSS:
.container {
height: 500px;
width: 500px;
display: flex; // Use Flexbox
align-items: center; // This centers children vertically in the parent.
justify-content: center; // This centers children horizontally.
background: white;
}
.child {
width: 100px;
height: 100px;
background: blue;
}
Centering with Transform
HTML:
<div class="wrapper">
<div class="centered">
centered
</div>
</div>
CSS:
.wrapper {
position: relative;
height: 600px;
}
.centered {
position: absolute;
z-index: 999;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Centering Text with Line Height
HTML:
<div class="container">
<span>vertically centered</span>
</div>
CSS:
.container{
height: 50px; /* set height */
line-height: 50px; /* set line-height equal to the height */
vertical-align: middle; /* works without this rule, but it is good having it explicitly set */
}
Note: This method will only vertically center a single line of text. It will not center block elements correctly and if the text breaks onto a new line, you will have two very tall lines of text.
Centering with Position: absolute
HTML:
<div class="wrapper">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
CSS:
.wrapper{
position:relative;height: 600px;
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
If you want to center other then images, then you must give height and width to that element.
HTML:
<div class="wrapper">
<div class="child">
make me center
</div>
</div>
CSS:
.wrapper{
position:relative;
height: 600px;
}
.wrapper .child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 30px;
border: 1px solid #f00;
}
Centering with pseudo element
HTML:
<div class="wrapper">
<div class="content"></div>
</div>
CSS:
.wrapper{
min-height: 600px;
}
.wrapper:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}.content {
display: inline-block;
height: 80px;
vertical-align: middle;
}
This method is best used in cases where you have a varied-height .content centered inside .wrapper, and you want .wrapper's height to expand when .content's height exceeds .wrapper's min-height.
ATutorialHub Related Guide
Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment