I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
<body>
<div>Div to be aligned vertically</div>
</body>
How can I center a div vertically in all major browsers, including Internet Explorer 6?
This question is related to
css
cross-browser
alignment
vertical-alignment
centering
The answer is
Declare this Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Then include it in your element:
.element{
@include vertical-align();
}
I use this. It works in Internet Explorer 8 and later:
height:268px - for display:table acts like min-height.
CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #cc9999;
}
p {
background: #f0ad4e;
}
#all {
margin: 200px auto;
}
.ff-valign-wrap {
display: table;
width: 100%;
height: 268px;
background: #ff00ff;
}
.ff-valign {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
background: #ffff00;
}
HTML:
<body>
<div id="all">
<div class="ff-valign-wrap">
<div class="ff-valign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
</div>
</div>
</div>
</body>
The three lines of code using transform works practically on modern browsers and Internet Explorer:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
I am adding this answer since I found some incompleteness in the previous version of this answer (and Stack Overflow won't allow me to simply comment).
'position' relative messes up the styling if the current div is in the body and has no container div. However 'fixed' seems to work, but it obviously fixes the content in the center of the viewport
Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders. Possibly a rendering issue. But adding just the minimal padding to some of them rendered it correctly. Chrome and Internet Explorer (surprisingly) rendered the boxes without any need for padding
Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.
For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%. The following pages explain this technique well and provide some code samples too:
- Vertical Centering in CSS
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)(no longer live)- Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible) (Archived article courtesy of the Wayback Machine)
There is also a technique to do the vertical centering using JavaScript. Vertical alignment of content with JavaScript & CSS demonstrates it.
This worked in my case (only tested in modern browsers):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
Not answering for browser compatibility but to also mention the new Grid and the not so new Flexbox feature.
Grid
From: Mozilla - Grid Documentation - Align Div Vertically
Browser Support: Grid Browser Support
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
Flexbox
Browser Support: Flexbox Browser Support
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
I use this. It works in Internet Explorer 8 and later:
height:268px - for display:table acts like min-height.
CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #cc9999;
}
p {
background: #f0ad4e;
}
#all {
margin: 200px auto;
}
.ff-valign-wrap {
display: table;
width: 100%;
height: 268px;
background: #ff00ff;
}
.ff-valign {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
background: #ffff00;
}
HTML:
<body>
<div id="all">
<div class="ff-valign-wrap">
<div class="ff-valign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
</div>
</div>
</div>
</body>
The three lines of code using transform works practically on modern browsers and Internet Explorer:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
I am adding this answer since I found some incompleteness in the previous version of this answer (and Stack Overflow won't allow me to simply comment).
'position' relative messes up the styling if the current div is in the body and has no container div. However 'fixed' seems to work, but it obviously fixes the content in the center of the viewport
Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders. Possibly a rendering issue. But adding just the minimal padding to some of them rendered it correctly. Chrome and Internet Explorer (surprisingly) rendered the boxes without any need for padding
Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.
For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%. The following pages explain this technique well and provide some code samples too:
- Vertical Centering in CSS
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)(no longer live)- Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible) (Archived article courtesy of the Wayback Machine)
There is also a technique to do the vertical centering using JavaScript. Vertical alignment of content with JavaScript & CSS demonstrates it.
To center the div on a page, check the fiddle link.
#vh {_x000D_
margin: auto;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
bottom: 0;_x000D_
right: 0;_x000D_
}_x000D_
.box{_x000D_
border-radius: 15px;_x000D_
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);_x000D_
padding: 25px;_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: white;_x000D_
}<div id="vh" class="box">Div to be aligned vertically</div>Another option is to use flex box, check the fiddle link.
.vh {_x000D_
background-color: #ddd;_x000D_
height: 400px;_x000D_
align-items: center;_x000D_
display: flex;_x000D_
}_x000D_
.vh > div {_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
vertical-align: middle;_x000D_
}<div class="vh">_x000D_
<div>Div to be aligned vertically</div>_x000D_
</div>Another option is to use a CSS 3 transform:
#vh {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
/*transform: translateX(-50%) translateY(-50%);*/_x000D_
transform: translate(-50%, -50%);_x000D_
}_x000D_
.box{_x000D_
border-radius: 15px;_x000D_
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);_x000D_
padding: 25px;_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: white;_x000D_
}<div id="vh" class="box">Div to be aligned vertically</div>If someone cares for Internet Explorer 10 (and later) only, use flexbox:
.parent {_x000D_
width: 500px;_x000D_
height: 500px;_x000D_
background: yellow;_x000D_
_x000D_
display: -webkit-flex;_x000D_
display: -ms-flexbox;_x000D_
display: flex;_x000D_
_x000D_
-webkit-justify-content: center;_x000D_
-ms-flex-pack: center;_x000D_
justify-content: center;_x000D_
_x000D_
-webkit-align-items: center;_x000D_
-ms-flex-align: center;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
.centered {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: blue;_x000D_
}<div class="parent">_x000D_
<div class="centered"></div>_x000D_
</div>Flexbox support: http://caniuse.com/flexbox
Edit 2020 : only use this if you need to support old browsers like IE8 (which you should refuse to do ). If not, use flexbox.
This is the simplest method I found and I use it all the time (jsFiddle demo here)
Thank Chris Coyier from CSS Tricks for this article.
html, body{_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
.v-wrap{_x000D_
height: 100%;_x000D_
white-space: nowrap;_x000D_
text-align: center;_x000D_
}_x000D_
.v-wrap:before{_x000D_
content: "";_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
width: 0;_x000D_
/* adjust for white space between pseudo element and next sibling */_x000D_
margin-right: -.25em;_x000D_
/* stretch line height */_x000D_
height: 100%; _x000D_
}_x000D_
.v-box{_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
white-space: normal;_x000D_
}<div class="v-wrap">_x000D_
<article class="v-box">_x000D_
<p>This is how I've been doing it for some time</p>_x000D_
</article>_x000D_
</div>Support starts with IE8.
After a lot of research I finally found the ultimate solution. It works even for floated elements. View Source
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
The following link presents a simple way of doing it with just 3 lines in your CSS:
Vertical align anything with just 3 lines of CSS.
Credits to: Sebastian Ekström.
I know the question has already an answer however I saw utility in the link for its simplicity.
The easiest solution is below:
.outer-div{_x000D_
width: 100%;_x000D_
height: 200px;_x000D_
display: flex;_x000D_
border:1px solid #000;_x000D_
}_x000D_
.inner-div{_x000D_
margin: auto;_x000D_
text-align:center;_x000D_
border:1px solid red;_x000D_
}<div class="outer-div">_x000D_
<div class="inner-div">_x000D_
Hey there!_x000D_
</div>_x000D_
</div>Especially for parent divs with relative (unknown) height, the centering in the unknown solution works great for me. There are some really nice code examples in the article.
It was tested in Chrome, Firefox, Opera, and Internet Explorer.
/* This parent can be any width and height */_x000D_
.block {_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
/* The ghost, nudged to maintain perfect centering */_x000D_
.block:before {_x000D_
content: '';_x000D_
display: inline-block;_x000D_
height: 100%;_x000D_
vertical-align: middle;_x000D_
margin-right: -0.25em; /* Adjusts for spacing */_x000D_
}_x000D_
_x000D_
/* The element to be centered, can_x000D_
also be of any width and height */ _x000D_
.centered {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
width: 300px;_x000D_
}<div style="width: 400px; height: 200px;">_x000D_
<div class="block" style="height: 90%; width: 100%">_x000D_
<div class="centered">_x000D_
<h1>Some text</h1>_x000D_
<p>Any other text..."</p>_x000D_
</div> _x000D_
</div>_x000D_
</div>This is by far the easiest approach, works on non-blocking elements as well, the only downside is, it's Flexbox, thus, older browsers will not support this.
<div class="sweet-overlay">
<img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>
Link to codepen:
http://codepen.io/damianocel/pen/LNOdRp
The important point here is, for vertical centering, we need to define a parent element (container) and the img must have a smaller height than the parent element.
Now the flexbox solution is a very easy way for modern browsers, so I recommend this for you:
.container{_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
height: 100%;_x000D_
background:green;_x000D_
}_x000D_
_x000D_
body, html{_x000D_
height:100%;_x000D_
}<div class="container">_x000D_
<div>Div to be aligned vertically</div>_x000D_
</div>One more I can't see on the list:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
- Cross-browser (including Internet Explorer 8 - Internet Explorer 10 without hacks!)
- Responsive with percentages and min-/max-
- Centered regardless of padding (without box-sizing!)
heightmust be declared (see Variable Height)- Recommended setting
overflow: autoto prevent content spillover (see Overflow)
I did it with this (change width, height, margin-top and margin-left accordingly):
.wrapper {
width:960px;
height:590px;
position:absolute;
top:50%;
left:50%;
margin-top:-295px;
margin-left:-480px;
}
<div class="wrapper"> -- Content -- </div>
For new comers please try
display: flex;
align-items: center;
justify-content: center;
Use the CSS Flexbox align-items property to achieve this.
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
}<div>This is centered vertically</div>I think a solid solution for all browsers without using flexbox - "align-items: center;" is a combination of display: table and vertical-align: middle;.
CSS
.vertically-center
{
display: table;
width: 100%; /* optional */
height: 100%; /* optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
HTML
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
Actually you need two div's for vertical centering. The div containing the content must have a width and height.
#container {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
margin-top: -200px;_x000D_
/* half of #content height*/_x000D_
left: 0;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
#content {_x000D_
width: 624px;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
height: 395px;_x000D_
border: 1px solid #000000;_x000D_
}<div id="container">_x000D_
<div id="content">_x000D_
<h1>Centered div</h1>_x000D_
</div>_x000D_
</div>Here is the result
The contents can be easily centered by using flexbox. The following code shows the CSS for the container inside which the contents needs to be centered:
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
This method doesn't use any transform. So it doesn't have a problem with the output becoming blurry.
position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
To center the div on a page, check the fiddle link.
#vh {_x000D_
margin: auto;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
bottom: 0;_x000D_
right: 0;_x000D_
}_x000D_
.box{_x000D_
border-radius: 15px;_x000D_
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);_x000D_
padding: 25px;_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: white;_x000D_
}<div id="vh" class="box">Div to be aligned vertically</div>Another option is to use flex box, check the fiddle link.
.vh {_x000D_
background-color: #ddd;_x000D_
height: 400px;_x000D_
align-items: center;_x000D_
display: flex;_x000D_
}_x000D_
.vh > div {_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
vertical-align: middle;_x000D_
}<div class="vh">_x000D_
<div>Div to be aligned vertically</div>_x000D_
</div>Another option is to use a CSS 3 transform:
#vh {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
/*transform: translateX(-50%) translateY(-50%);*/_x000D_
transform: translate(-50%, -50%);_x000D_
}_x000D_
.box{_x000D_
border-radius: 15px;_x000D_
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);_x000D_
padding: 25px;_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: white;_x000D_
}<div id="vh" class="box">Div to be aligned vertically</div>To vertical-align a box in web page, including Internet Explorer 6, you may use:
- Conditional comments
- The
haslayoutproperty display: table-valuefor others (and now flex)
/* Internet Explorer 8 and others */_x000D_
.main {_x000D_
width: 500px;_x000D_
margin: auto;_x000D_
border: solid;_x000D_
}_x000D_
html {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
display: table;_x000D_
}_x000D_
body {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<!-- [if lte IE 7]>_x000D_
<style> /* Should be in the <head> */_x000D_
html, body , .ie {_x000D_
height: 100%;_x000D_
text-align: center;_x000D_
white-space: nowrap;_x000D_
}_x000D_
.ie , .main{_x000D_
display: inline; /* Used with zoom in case you take a block element instead an inline element */_x000D_
zoom: 1;_x000D_
vertical-align: middle;_x000D_
text-align: left;_x000D_
white-space: normal;_x000D_
}_x000D_
</style>_x000D_
<b class="ie"></b>_x000D_
<!--[endif]-->_x000D_
<div class="main">_x000D_
<p>Fill it up with your content </p>_x000D_
<p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>_x000D_
</div>Actually, Internet Explorer 7 would bring some trouble here being the only which will strictly apply height: 100% on HTML/body elements.
But, this is past and today and who still minds old versions of Internet Explorer, table/table-cell is just fine, display: flex is promising, and display: grid will show up some day.
Another nowdays example via flex
html {_x000D_
display: flex;_x000D_
min-height: 100vh;/* or height */_x000D_
}_x000D_
_x000D_
body {_x000D_
margin: auto;_x000D_
}<div>Div to be aligned vertically</div>For new comers please try
display: flex;
align-items: center;
justify-content: center;
This solution worked for me if you have a block element (e. g. ). I used the colors to make the solution clearer.
HTML:
<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>
CSS:
main {
position: relative;
width: 400px;
height: 400px;
}
.skin_orange {
outline: thin dotted red;
background: orange;
}
.bigBox {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.skin_blue {
background-color: blue;
}
Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.
For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%. The following pages explain this technique well and provide some code samples too:
- Vertical Centering in CSS
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)(no longer live)- Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible) (Archived article courtesy of the Wayback Machine)
There is also a technique to do the vertical centering using JavaScript. Vertical alignment of content with JavaScript & CSS demonstrates it.
Since each time I need to center div vertically I google for it over and over again and this answer always comes first I'll leave this for future me (since none of the provided solutions fit my need well):
So if one is already using bootstrap this can be done as below:
<div style="min-height: 100vh;" class="align-items-center row">
<div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well
//content goes here
</div>
</div>
I did it with this (change width, height, margin-top and margin-left accordingly):
.wrapper {
width:960px;
height:590px;
position:absolute;
top:50%;
left:50%;
margin-top:-295px;
margin-left:-480px;
}
<div class="wrapper"> -- Content -- </div>
The contents can be easily centered by using flexbox. The following code shows the CSS for the container inside which the contents needs to be centered:
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Edit 2020 : only use this if you need to support old browsers like IE8 (which you should refuse to do ). If not, use flexbox.
This is the simplest method I found and I use it all the time (jsFiddle demo here)
Thank Chris Coyier from CSS Tricks for this article.
html, body{_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
.v-wrap{_x000D_
height: 100%;_x000D_
white-space: nowrap;_x000D_
text-align: center;_x000D_
}_x000D_
.v-wrap:before{_x000D_
content: "";_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
width: 0;_x000D_
/* adjust for white space between pseudo element and next sibling */_x000D_
margin-right: -.25em;_x000D_
/* stretch line height */_x000D_
height: 100%; _x000D_
}_x000D_
.v-box{_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
white-space: normal;_x000D_
}<div class="v-wrap">_x000D_
<article class="v-box">_x000D_
<p>This is how I've been doing it for some time</p>_x000D_
</article>_x000D_
</div>Support starts with IE8.
There is a trick I found out recently: You need to use top 50% & then you do a translateY(-50%)
.outer-div {_x000D_
position: relative;_x000D_
height: 150px;_x000D_
width: 150px;_x000D_
background-color: red;_x000D_
}_x000D_
_x000D_
.centered-div {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
-webkit-transform: translateY(-50%);_x000D_
-ms-transform: translateY(-50%);_x000D_
transform: translateY(-50%);_x000D_
background-color: white;_x000D_
}<div class='outer-div'>_x000D_
<div class='centered-div'>_x000D_
Test text_x000D_
</div>_x000D_
</div>I just wrote this CSS and to know more, please go through: This article with vertical align anything with just 3 lines of CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Using flex property of CSS.
.parent {_x000D_
width: 400px;_x000D_
height:200px;_x000D_
background: blue;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content:center;_x000D_
}_x000D_
_x000D_
.child {_x000D_
width: 75px;_x000D_
height: 75px;_x000D_
background: yellow;_x000D_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div>or by using display: flex; and margin: auto;
.parent {_x000D_
width: 400px;_x000D_
height:200px;_x000D_
background: blue;_x000D_
display: flex;_x000D_
}_x000D_
_x000D_
.child {_x000D_
width: 75px;_x000D_
height: 75px;_x000D_
background: yellow;_x000D_
margin:auto;_x000D_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div>show text center
.parent {_x000D_
width: 400px;_x000D_
height: 200px;_x000D_
background: yellow;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content:center;_x000D_
}<div class="parent">Center</div>Using percentage(%) height and width.
.parent {_x000D_
position: absolute;_x000D_
height:100%;_x000D_
width:100%;_x000D_
background: blue;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content:center;_x000D_
}_x000D_
_x000D_
.child {_x000D_
width: 75px;_x000D_
height: 75px;_x000D_
background: yellow;_x000D_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div> This worked in my case (only tested in modern browsers):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
I just found another way which worked for me:
<div class="container">
<div class="vertical">
<h1>Welcome</h1>
<h2>Aligned Vertically</h2>
<a href="#">Click ME</a>
</div>
</div>
CSS
.vertical{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Since each time I need to center div vertically I google for it over and over again and this answer always comes first I'll leave this for future me (since none of the provided solutions fit my need well):
So if one is already using bootstrap this can be done as below:
<div style="min-height: 100vh;" class="align-items-center row">
<div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well
//content goes here
</div>
</div>
The best thing to do would be:
#vertalign{
height: 300px;
width: 300px;
position: absolute;
top: calc(50vh - 150px);
}
150 pixels because that's half of the div's height in this case.
A modern way to center an element vertically would be to use flexbox.
You need a parent to decide the height and a child to center.
The example below will center a div to the center within your browser. What's important (in my example) is to set height: 100% to body and html and then min-height: 100% to your container.
body, html {_x000D_
background: #F5F5F5;_x000D_
box-sizing: border-box;_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
#center_container {_x000D_
align-items: center;_x000D_
display: flex;_x000D_
min-height: 100%;_x000D_
}_x000D_
_x000D_
#center {_x000D_
background: white;_x000D_
margin: 0 auto;_x000D_
padding: 10px;_x000D_
text-align: center;_x000D_
width: 200px;_x000D_
}<div id='center_container'>_x000D_
<div id='center'>I am center.</div>_x000D_
</div>To vertical-align a box in web page, including Internet Explorer 6, you may use:
- Conditional comments
- The
haslayoutproperty display: table-valuefor others (and now flex)
/* Internet Explorer 8 and others */_x000D_
.main {_x000D_
width: 500px;_x000D_
margin: auto;_x000D_
border: solid;_x000D_
}_x000D_
html {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
display: table;_x000D_
}_x000D_
body {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<!-- [if lte IE 7]>_x000D_
<style> /* Should be in the <head> */_x000D_
html, body , .ie {_x000D_
height: 100%;_x000D_
text-align: center;_x000D_
white-space: nowrap;_x000D_
}_x000D_
.ie , .main{_x000D_
display: inline; /* Used with zoom in case you take a block element instead an inline element */_x000D_
zoom: 1;_x000D_
vertical-align: middle;_x000D_
text-align: left;_x000D_
white-space: normal;_x000D_
}_x000D_
</style>_x000D_
<b class="ie"></b>_x000D_
<!--[endif]-->_x000D_
<div class="main">_x000D_
<p>Fill it up with your content </p>_x000D_
<p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>_x000D_
</div>Actually, Internet Explorer 7 would bring some trouble here being the only which will strictly apply height: 100% on HTML/body elements.
But, this is past and today and who still minds old versions of Internet Explorer, table/table-cell is just fine, display: flex is promising, and display: grid will show up some day.
Another nowdays example via flex
html {_x000D_
display: flex;_x000D_
min-height: 100vh;/* or height */_x000D_
}_x000D_
_x000D_
body {_x000D_
margin: auto;_x000D_
}<div>Div to be aligned vertically</div>This is always where I go when I have to come back to this issue.
For those who don't want to make the jump:
- Specify the parent container as
position:relativeorposition:absolute. - Specify a fixed height on the child container.
- Set
position:absoluteandtop:50%on the child container to move the top down to the middle of the parent. - Set margin-top:-yy where yy is half the height of the child container to offset the item up.
An example of this in code:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Not answering for browser compatibility but to also mention the new Grid and the not so new Flexbox feature.
Grid
From: Mozilla - Grid Documentation - Align Div Vertically
Browser Support: Grid Browser Support
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
Flexbox
Browser Support: Flexbox Browser Support
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
The simplest way would be the following 3 lines of CSS:
1) position: relative;
2) top: 50%;
3) transform: translateY(-50%);
Following is an EXAMPLE:
div.outer-div {_x000D_
height: 170px;_x000D_
width: 300px;_x000D_
background-color: lightgray;_x000D_
}_x000D_
_x000D_
div.middle-div {_x000D_
position: relative;_x000D_
top: 50%;_x000D_
-webkit-transform: translateY(-50%);_x000D_
-ms-transform: translateY(-50%);_x000D_
transform: translateY(-50%);_x000D_
}<div class='outer-div'>_x000D_
<div class='middle-div'>_x000D_
Test text_x000D_
</div>_x000D_
</div>Actually you need two div's for vertical centering. The div containing the content must have a width and height.
#container {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
margin-top: -200px;_x000D_
/* half of #content height*/_x000D_
left: 0;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
#content {_x000D_
width: 624px;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
height: 395px;_x000D_
border: 1px solid #000000;_x000D_
}<div id="container">_x000D_
<div id="content">_x000D_
<h1>Centered div</h1>_x000D_
</div>_x000D_
</div>Here is the result
Especially for parent divs with relative (unknown) height, the centering in the unknown solution works great for me. There are some really nice code examples in the article.
It was tested in Chrome, Firefox, Opera, and Internet Explorer.
/* This parent can be any width and height */_x000D_
.block {_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
/* The ghost, nudged to maintain perfect centering */_x000D_
.block:before {_x000D_
content: '';_x000D_
display: inline-block;_x000D_
height: 100%;_x000D_
vertical-align: middle;_x000D_
margin-right: -0.25em; /* Adjusts for spacing */_x000D_
}_x000D_
_x000D_
/* The element to be centered, can_x000D_
also be of any width and height */ _x000D_
.centered {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
width: 300px;_x000D_
}<div style="width: 400px; height: 200px;">_x000D_
<div class="block" style="height: 90%; width: 100%">_x000D_
<div class="centered">_x000D_
<h1>Some text</h1>_x000D_
<p>Any other text..."</p>_x000D_
</div> _x000D_
</div>_x000D_
</div>This is always where I go when I have to come back to this issue.
For those who don't want to make the jump:
- Specify the parent container as
position:relativeorposition:absolute. - Specify a fixed height on the child container.
- Set
position:absoluteandtop:50%on the child container to move the top down to the middle of the parent. - Set margin-top:-yy where yy is half the height of the child container to offset the item up.
An example of this in code:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Actually you need two div's for vertical centering. The div containing the content must have a width and height.
#container {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
margin-top: -200px;_x000D_
/* half of #content height*/_x000D_
left: 0;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
#content {_x000D_
width: 624px;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
height: 395px;_x000D_
border: 1px solid #000000;_x000D_
}<div id="container">_x000D_
<div id="content">_x000D_
<h1>Centered div</h1>_x000D_
</div>_x000D_
</div>Here is the result
Vertical & Horizontal CENTER
HTML
<div id="dialog">Centered Dialog</div>
CSS
#dialog {
position:fixed; top:50%; left:50%; z-index:99991;
width:300px; height:60px;
margin-top:-150px; /* half of the width */
margin-left:-30px; /* half of the height */}
Enjoy!
By using the transform property we can do a vertically centered div easily.
.main-div {_x000D_
background: none repeat scroll 0 0 #999;_x000D_
font-size: 18px;_x000D_
height: 450px;_x000D_
max-width: 850px;_x000D_
padding: 15px;_x000D_
}_x000D_
_x000D_
.vertical-center {_x000D_
background: none repeat scroll 0 0 #1FA67A;_x000D_
color: #FFFFFF;_x000D_
padding: 15px;_x000D_
position: relative;_x000D_
top: 50%;_x000D_
transform: translateY(-50%);_x000D_
-moz-transform: translateY(-50%);_x000D_
-webkit-transform: translateY(-50%);_x000D_
-ms-transform: translateY(-50%);_x000D_
-o-transform: translateY(-50%);_x000D_
}<div class="main-div">_x000D_
<div class="vertical-center">_x000D_
<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>_x000D_
</div>_x000D_
</div>The simplest way would be the following 3 lines of CSS:
1) position: relative;
2) top: 50%;
3) transform: translateY(-50%);
Following is an EXAMPLE:
div.outer-div {_x000D_
height: 170px;_x000D_
width: 300px;_x000D_
background-color: lightgray;_x000D_
}_x000D_
_x000D_
div.middle-div {_x000D_
position: relative;_x000D_
top: 50%;_x000D_
-webkit-transform: translateY(-50%);_x000D_
-ms-transform: translateY(-50%);_x000D_
transform: translateY(-50%);_x000D_
}<div class='outer-div'>_x000D_
<div class='middle-div'>_x000D_
Test text_x000D_
</div>_x000D_
</div>CSS Grid
body, html { margin: 0; }_x000D_
_x000D_
body {_x000D_
display: grid;_x000D_
min-height: 100vh;_x000D_
align-items: center;_x000D_
}<div>Div to be aligned vertically</div>The answer from Billbad only works with a fixed width of the .inner div.
This solution works for a dynamic width by adding the attribute text-align: center to the .outer div.
.outer {_x000D_
position: absolute;_x000D_
display: table;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
text-align: center;_x000D_
}_x000D_
.middle {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}_x000D_
.inner {_x000D_
text-align: center;_x000D_
display: inline-block;_x000D_
width: auto;_x000D_
}<div class="outer">_x000D_
<div class="middle">_x000D_
<div class="inner">_x000D_
Content_x000D_
</div>_x000D_
</div>_x000D_
</div>A modern way to center an element vertically would be to use flexbox.
You need a parent to decide the height and a child to center.
The example below will center a div to the center within your browser. What's important (in my example) is to set height: 100% to body and html and then min-height: 100% to your container.
body, html {_x000D_
background: #F5F5F5;_x000D_
box-sizing: border-box;_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
#center_container {_x000D_
align-items: center;_x000D_
display: flex;_x000D_
min-height: 100%;_x000D_
}_x000D_
_x000D_
#center {_x000D_
background: white;_x000D_
margin: 0 auto;_x000D_
padding: 10px;_x000D_
text-align: center;_x000D_
width: 200px;_x000D_
}<div id='center_container'>_x000D_
<div id='center'>I am center.</div>_x000D_
</div>I just wrote this CSS and to know more, please go through: This article with vertical align anything with just 3 lines of CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Just do it: Add the class at your div:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
And read this article for an explanation. Note: Height is necessary.
Here is a simple way, with almost no code:
CSS code:
.main{
height: 100%;
}
.center{
top: 50%;
margin-top: 50%;
}
HTML code:
<div class="main">
<div class="center">
Hi, I am centered!
</div>
</div>
Your text will be in the middle of the page!
Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.
For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%. The following pages explain this technique well and provide some code samples too:
- Vertical Centering in CSS
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)(no longer live)- Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible) (Archived article courtesy of the Wayback Machine)
There is also a technique to do the vertical centering using JavaScript. Vertical alignment of content with JavaScript & CSS demonstrates it.
Actually you need two div's for vertical centering. The div containing the content must have a width and height.
#container {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
margin-top: -200px;_x000D_
/* half of #content height*/_x000D_
left: 0;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
#content {_x000D_
width: 624px;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
height: 395px;_x000D_
border: 1px solid #000000;_x000D_
}<div id="container">_x000D_
<div id="content">_x000D_
<h1>Centered div</h1>_x000D_
</div>_x000D_
</div>Here is the result
The following link presents a simple way of doing it with just 3 lines in your CSS:
Vertical align anything with just 3 lines of CSS.
Credits to: Sebastian Ekström.
I know the question has already an answer however I saw utility in the link for its simplicity.
The following is working in my case and was tested in Firefox.
#element {
display: block;
transform: translateY(50%);
-moz-transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
The div's height and parent's height are dynamic. I use it when there are other elements on the same parent which is higher than the target element, where both are positioned horizontally inline.
I find this one most useful.. it gives the most accurate 'H' layout and is very simple to understand.
The benefit in this markup is that you define your content size in a single place -> "PageContent".
The Colors of the page background and its horizontal margins are defined in their corresponding divs.
<div id="PageLayoutConfiguration"
style="display: table;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
width: 100%; height: 100%;">
<div id="PageBackground"
style="display: table-cell; vertical-align: middle;
background-color: purple;">
<div id="PageHorizontalMargins"
style="width: 100%;
background-color: seashell;">
<div id="PageContent"
style="width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;">
my content goes here...
</div>
</div>
</div>
</div>
And here with CSS separated:
<div id="PageLayoutConfiguration">
<div id="PageBackground">
<div id="PageHorizontalMargins">
<div id="PageContent">
my content goes here...
</div>
</div>
</div>
</div>
#PageLayoutConfiguration{
display: table; width: 100%; height: 100%;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}
#PageBackground{
display: table-cell; vertical-align: middle;
background-color: purple;
}
#PageHorizontalMargins{
style="width: 100%;
background-color: seashell;
}
#PageContent{
width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;
}
One more I can't see on the list:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
- Cross-browser (including Internet Explorer 8 - Internet Explorer 10 without hacks!)
- Responsive with percentages and min-/max-
- Centered regardless of padding (without box-sizing!)
heightmust be declared (see Variable Height)- Recommended setting
overflow: autoto prevent content spillover (see Overflow)
Vertical & Horizontal CENTER
HTML
<div id="dialog">Centered Dialog</div>
CSS
#dialog {
position:fixed; top:50%; left:50%; z-index:99991;
width:300px; height:60px;
margin-top:-150px; /* half of the width */
margin-left:-30px; /* half of the height */}
Enjoy!
The answer from Billbad only works with a fixed width of the .inner div.
This solution works for a dynamic width by adding the attribute text-align: center to the .outer div.
.outer {_x000D_
position: absolute;_x000D_
display: table;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
text-align: center;_x000D_
}_x000D_
.middle {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}_x000D_
.inner {_x000D_
text-align: center;_x000D_
display: inline-block;_x000D_
width: auto;_x000D_
}<div class="outer">_x000D_
<div class="middle">_x000D_
<div class="inner">_x000D_
Content_x000D_
</div>_x000D_
</div>_x000D_
</div>The easiest solution is below:
.outer-div{_x000D_
width: 100%;_x000D_
height: 200px;_x000D_
display: flex;_x000D_
border:1px solid #000;_x000D_
}_x000D_
.inner-div{_x000D_
margin: auto;_x000D_
text-align:center;_x000D_
border:1px solid red;_x000D_
}<div class="outer-div">_x000D_
<div class="inner-div">_x000D_
Hey there!_x000D_
</div>_x000D_
</div>Just do it: Add the class at your div:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
And read this article for an explanation. Note: Height is necessary.
This method doesn't use any transform. So it doesn't have a problem with the output becoming blurry.
position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
This is by far the easiest approach, works on non-blocking elements as well, the only downside is, it's Flexbox, thus, older browsers will not support this.
<div class="sweet-overlay">
<img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>
Link to codepen:
http://codepen.io/damianocel/pen/LNOdRp
The important point here is, for vertical centering, we need to define a parent element (container) and the img must have a smaller height than the parent element.
After a lot of research I finally found the ultimate solution. It works even for floated elements. View Source
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
Centering only vertically
If you don't care about Internet Explorer 6 and 7, you can use a technique that involves two containers.
The outer container:
- should have
display: table;
The inner container:
- should have
display: table-cell; - should have
vertical-align: middle;
The content box:
- should have
display: inline-block;
You can add any content you want to the content box without caring about its width or height!
Demo:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
background: #fff;
padding: 20px;
border: 1px solid #000;
}<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>See also this Fiddle!
Centering horizontally and vertically
If you want to center both horizontally and vertically, you also need the following.
The inner container:
- should have
text-align: center;
The content box:
- should re-adjust the horizontal text-alignment to for example
text-align: left;ortext-align: right;, unless you want text to be centered
Demo:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
border: 1px solid #000;
}<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>See also this Fiddle!
Using flex property of CSS.
.parent {_x000D_
width: 400px;_x000D_
height:200px;_x000D_
background: blue;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content:center;_x000D_
}_x000D_
_x000D_
.child {_x000D_
width: 75px;_x000D_
height: 75px;_x000D_
background: yellow;_x000D_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div>or by using display: flex; and margin: auto;
.parent {_x000D_
width: 400px;_x000D_
height:200px;_x000D_
background: blue;_x000D_
display: flex;_x000D_
}_x000D_
_x000D_
.child {_x000D_
width: 75px;_x000D_
height: 75px;_x000D_
background: yellow;_x000D_
margin:auto;_x000D_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div>show text center
.parent {_x000D_
width: 400px;_x000D_
height: 200px;_x000D_
background: yellow;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content:center;_x000D_
}<div class="parent">Center</div>Using percentage(%) height and width.
.parent {_x000D_
position: absolute;_x000D_
height:100%;_x000D_
width:100%;_x000D_
background: blue;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content:center;_x000D_
}_x000D_
_x000D_
.child {_x000D_
width: 75px;_x000D_
height: 75px;_x000D_
background: yellow;_x000D_
}<div class="parent">_x000D_
<div class="child"></div>_x000D_
</div> .center {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
transform: translate(-50%, -50%); /* (x, y) => position */_x000D_
-ms-transform: translate(-50%, -50%); /* IE 9 */_x000D_
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ _x000D_
}_x000D_
_x000D_
.vertical {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
//left: 0;_x000D_
transform: translate(0, -50%); /* (x, y) => position */_x000D_
}_x000D_
_x000D_
.horizontal {_x000D_
position: absolute;_x000D_
//top: 0;_x000D_
left: 50%;_x000D_
transform: translate(-50%, 0); /* (x, y) => position */_x000D_
}_x000D_
_x000D_
div {_x000D_
padding: 1em;_x000D_
background-color: grey; _x000D_
color: white;_x000D_
} <body>_x000D_
<div class="vertical">Vertically left</div>_x000D_
<div class="horizontal">Horizontal top</div>_x000D_
<div class="center">Vertically Horizontal</div> _x000D_
</body>Related: Center a Image
There is a trick I found out recently: You need to use top 50% & then you do a translateY(-50%)
.outer-div {_x000D_
position: relative;_x000D_
height: 150px;_x000D_
width: 150px;_x000D_
background-color: red;_x000D_
}_x000D_
_x000D_
.centered-div {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
-webkit-transform: translateY(-50%);_x000D_
-ms-transform: translateY(-50%);_x000D_
transform: translateY(-50%);_x000D_
background-color: white;_x000D_
}<div class='outer-div'>_x000D_
<div class='centered-div'>_x000D_
Test text_x000D_
</div>_x000D_
</div>Here is a simple way, with almost no code:
CSS code:
.main{
height: 100%;
}
.center{
top: 50%;
margin-top: 50%;
}
HTML code:
<div class="main">
<div class="center">
Hi, I am centered!
</div>
</div>
Your text will be in the middle of the page!
Now the flexbox solution is a very easy way for modern browsers, so I recommend this for you:
.container{_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
height: 100%;_x000D_
background:green;_x000D_
}_x000D_
_x000D_
body, html{_x000D_
height:100%;_x000D_
}<div class="container">_x000D_
<div>Div to be aligned vertically</div>_x000D_
</div>CSS Grid
body, html { margin: 0; }_x000D_
_x000D_
body {_x000D_
display: grid;_x000D_
min-height: 100vh;_x000D_
align-items: center;_x000D_
}<div>Div to be aligned vertically</div>The following is working in my case and was tested in Firefox.
#element {
display: block;
transform: translateY(50%);
-moz-transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
The div's height and parent's height are dynamic. I use it when there are other elements on the same parent which is higher than the target element, where both are positioned horizontally inline.
Declare this Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Then include it in your element:
.element{
@include vertical-align();
}
By using the transform property we can do a vertically centered div easily.
.main-div {_x000D_
background: none repeat scroll 0 0 #999;_x000D_
font-size: 18px;_x000D_
height: 450px;_x000D_
max-width: 850px;_x000D_
padding: 15px;_x000D_
}_x000D_
_x000D_
.vertical-center {_x000D_
background: none repeat scroll 0 0 #1FA67A;_x000D_
color: #FFFFFF;_x000D_
padding: 15px;_x000D_
position: relative;_x000D_
top: 50%;_x000D_
transform: translateY(-50%);_x000D_
-moz-transform: translateY(-50%);_x000D_
-webkit-transform: translateY(-50%);_x000D_
-ms-transform: translateY(-50%);_x000D_
-o-transform: translateY(-50%);_x000D_
}<div class="main-div">_x000D_
<div class="vertical-center">_x000D_
<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>_x000D_
</div>_x000D_
</div>I just found another way which worked for me:
<div class="container">
<div class="vertical">
<h1>Welcome</h1>
<h2>Aligned Vertically</h2>
<a href="#">Click ME</a>
</div>
</div>
CSS
.vertical{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
I think a solid solution for all browsers without using flexbox - "align-items: center;" is a combination of display: table and vertical-align: middle;.
CSS
.vertically-center
{
display: table;
width: 100%; /* optional */
height: 100%; /* optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
HTML
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
The best thing to do would be:
#vertalign{
height: 300px;
width: 300px;
position: absolute;
top: calc(50vh - 150px);
}
150 pixels because that's half of the div's height in this case.
.center {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
transform: translate(-50%, -50%); /* (x, y) => position */_x000D_
-ms-transform: translate(-50%, -50%); /* IE 9 */_x000D_
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ _x000D_
}_x000D_
_x000D_
.vertical {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
//left: 0;_x000D_
transform: translate(0, -50%); /* (x, y) => position */_x000D_
}_x000D_
_x000D_
.horizontal {_x000D_
position: absolute;_x000D_
//top: 0;_x000D_
left: 50%;_x000D_
transform: translate(-50%, 0); /* (x, y) => position */_x000D_
}_x000D_
_x000D_
div {_x000D_
padding: 1em;_x000D_
background-color: grey; _x000D_
color: white;_x000D_
} <body>_x000D_
<div class="vertical">Vertically left</div>_x000D_
<div class="horizontal">Horizontal top</div>_x000D_
<div class="center">Vertically Horizontal</div> _x000D_
</body>Related: Center a Image
Use the CSS Flexbox align-items property to achieve this.
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
}<div>This is centered vertically</div>This solution worked for me if you have a block element (e. g. ). I used the colors to make the solution clearer.
HTML:
<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>
CSS:
main {
position: relative;
width: 400px;
height: 400px;
}
.skin_orange {
outline: thin dotted red;
background: orange;
}
.bigBox {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.skin_blue {
background-color: blue;
}
If someone cares for Internet Explorer 10 (and later) only, use flexbox:
.parent {_x000D_
width: 500px;_x000D_
height: 500px;_x000D_
background: yellow;_x000D_
_x000D_
display: -webkit-flex;_x000D_
display: -ms-flexbox;_x000D_
display: flex;_x000D_
_x000D_
-webkit-justify-content: center;_x000D_
-ms-flex-pack: center;_x000D_
justify-content: center;_x000D_
_x000D_
-webkit-align-items: center;_x000D_
-ms-flex-align: center;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
.centered {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: blue;_x000D_
}<div class="parent">_x000D_
<div class="centered"></div>_x000D_
</div>Flexbox support: http://caniuse.com/flexbox
Centering only vertically
If you don't care about Internet Explorer 6 and 7, you can use a technique that involves two containers.
The outer container:
- should have
display: table;
The inner container:
- should have
display: table-cell; - should have
vertical-align: middle;
The content box:
- should have
display: inline-block;
You can add any content you want to the content box without caring about its width or height!
Demo:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
background: #fff;
padding: 20px;
border: 1px solid #000;
}<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>See also this Fiddle!
Centering horizontally and vertically
If you want to center both horizontally and vertically, you also need the following.
The inner container:
- should have
text-align: center;
The content box:
- should re-adjust the horizontal text-alignment to for example
text-align: left;ortext-align: right;, unless you want text to be centered
Demo:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
border: 1px solid #000;
}<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>See also this Fiddle!
I find this one most useful.. it gives the most accurate 'H' layout and is very simple to understand.
The benefit in this markup is that you define your content size in a single place -> "PageContent".
The Colors of the page background and its horizontal margins are defined in their corresponding divs.
<div id="PageLayoutConfiguration"
style="display: table;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
width: 100%; height: 100%;">
<div id="PageBackground"
style="display: table-cell; vertical-align: middle;
background-color: purple;">
<div id="PageHorizontalMargins"
style="width: 100%;
background-color: seashell;">
<div id="PageContent"
style="width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;">
my content goes here...
</div>
</div>
</div>
</div>
And here with CSS separated:
<div id="PageLayoutConfiguration">
<div id="PageBackground">
<div id="PageHorizontalMargins">
<div id="PageContent">
my content goes here...
</div>
</div>
</div>
</div>
#PageLayoutConfiguration{
display: table; width: 100%; height: 100%;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}
#PageBackground{
display: table-cell; vertical-align: middle;
background-color: purple;
}
#PageHorizontalMargins{
style="width: 100%;
background-color: seashell;
}
#PageContent{
width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;
}
Source: Stackoverflow.com