CSS Vertical Centering

CSS Vertical Centering
Nikhil
Published on 2021-07-09 05:56:10

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 (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website