Related
So I know we can center a div horizontally if we use margin:0 auto;. Should margin:auto auto; work how I think it should work? Centering it vertically as well?
Why doesn't vertical-align:middle; work either?
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
JSFiddle
Update Aug 2020
Although the below is still worth reading for the useful info, we have had Flexbox for some time now, so just use that, as per this answer.
You can't use:
vertical-align:middle because it's not applicable to block-level elements
margin-top:auto and margin-bottom:auto because their used values would compute as zero
margin-top:-50% because percentage-based margin values are calculated relative to the width of containing block
In fact, the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent. Whenever a vertical margin's value is changed, it will trigger a parent element height re-calculation (re-flow), which would in turn trigger a re-center of the original element... making it an infinite loop.
You can use:
A few workarounds like this which work for your scenario; the three elements have to be nested like so:
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
border: 1px solid orange;
}
<div class="container">
<div class="helper">
<div class="content">
<p>stuff</p>
</div>
</div>
</div
JSFiddle works fine according to Browsershot.
Since this question was asked in 2012 and we have come a long way with browser support for flexboxes, I felt as though this answer was obligatory.
If the display of your parent container is flex, then yes, margin: auto auto (also known as margin: auto) will work to center it both horizontally and vertically, regardless if it is an inline or block element.
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
}
#child {
margin: auto auto;
}
<div id="parent">
<div id="child">hello world</div>
</div>
Note that the width/height do not have to be specified absolutely, as in this example jfiddle which uses sizing relative to the viewport.
Although browser support for flexboxes is at an all-time high at time of posting, many browsers still do not support it or require vendor prefixes. Refer to http://caniuse.com/flexbox for updated browser support information.
Update
Since this answer received a bit of attention, I would also like to point out that you don't need to specify margin at all if you're using display: flex and would like to center all of the elements in the container:
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
<div id="parent">
<div>hello world</div>
</div>
Here's the best solution I've found: http://jsfiddle.net/yWnZ2/446/ Works in Chrome, Firefox, Safari, IE8-11 & Edge.
If you have a declared height (height: 1em, height: 50%, etc.) or it's an element where the browser knows the height (img, svg, or canvas for example), then all you need for vertical centering is this:
.message {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
You'll usually want to specify a width or max-width so the content doesn't stretch the whole length of the screen/container.
If you're using this for a modal that you want always centered in the viewport overlapping other content, use position: fixed; for both elements instead of position: absolute. http://jsfiddle.net/yWnZ2/445/
Here's a more complete writeup: http://codepen.io/shshaw/pen/gEiDt
Edit: it's 2020, I would use flex box instead.
Original answer:
Html
<body>
<div class="centered">
</div>
</body>
CSS
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I know the question is from 2012, but I found the easiest way ever, and I wanted to share.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
and CSS:
#parent{
height: 100%;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
If you know the height of the div you want to center, you can position it absolutely within its parent and then set the top value to 50%. That will put the top of the child div 50% of the way down its parent, i.e. too low. Pull it back up by setting its margin-top to half its height. So now you have the vertical midpoint of the child div sitting at the vertical midpoint of the parent - vertically centered!
Example:
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
http://jsfiddle.net/yWnZ2/2/
Those two solution require only two nested elements.
First - Relative and absolute positioning if the content is static (manual center).
.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);
}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%; left: 0%; right: 0%;
}
https://jsfiddle.net/GlupiJas/5mv3j171/
or for fluid design - for exact content center use below example instead:
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/GlupiJas/w3jnjuv0/
You need 'min-height' set in case the content will exceed 50% of window height. You can also manipulate this height with media query for mobile and tablet devices . But only if You play with responsive design.
I guess You could go further and use simple JavaScript/JQuery script to manipulate the min-height or fixed height if there is a need for some reason.
Second - if content is fluid u can also use table and table-cell css properties with vertical alignment and text-align centered:
/*in a wrapper*/
display:table;
and
/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;
Works and scale perfectly, often used as responsive web design solution with grid layouts and media query that manipulate the width of the object.
.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);
}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}
https://jsfiddle.net/GlupiJas/4daf2v36/
I prefer table solution for exact content centering, but in some cases relative absolute positioning will do better job especially if we don't want to keep exact proportion of content alignment.
.black {
display:flex;
flex-direction: column;
height: 200px;
background:grey
}
.message {
background:yellow;
width:200px;
padding:10px;
margin: auto auto;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
There isn't one easy way to center div vertically which would do the trick in every situation.
However, there are lots of ways to do it depending on the situation.
Here are few of them:
Set top and bottom padding of the parent element for example padding:20px 0px 20px 0px
Use table, table cell centers its' content vertically
Set parent element's position relative and the div's you want to vertically center to absolute and style it as top:50px; bottom:50px; for example
You may also google for "css vertical centering"
variable height ,margin top and bottom auto
.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
variable height ,margin top and bottom auto
Using Flexbox:
HTML:
<div class="container">
<img src="http://lorempixel.com/400/200" />
</div>
CSS:
.container {
height: 500px;
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
}
View result
I think you can fix that with Flexbox
.black {
height : 200px;
width : 200px;
background-color : teal;
border: 5px solid rgb(0, 53, 53);
/* This is the important part */
display : flex;
justify-content: center;
align-items: center;
}
.message {
background-color : rgb(119, 128, 0);
border: 5px solid rgb(0, 53, 53);
height : 50%;
width : 50%;
padding : 5px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
.black {
position:absolute;
/*
Replace with a one line inset property.
top:0;
bottom:0;
left:0;
right:0;
*/
inset: 0;
background:rgba(0,0,0,.5);
/*
Since no one has mentioned it yet,
here it is the grid display and
the place-content property.
*/
display:grid;
place-content: center;
}
.message {
background:yellow;
width:200px;
/*
There's no point here.
margin:auto auto;
*/
padding:10px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
<div style="display:flex">
<img src="" style="display:block !important; margin:auto">
</div>
To center an image in a div horizontally and vertically
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
background:yellow;
width:200px;
padding:10px;
}
-
----------
<div class="black">
<div class="message">
This is a popup message.
</div>
I'm trying to put two divs next to eachother at all times and so far nothing seems to work..
the divs width has to be 50% of the screen!
I need all the divs to have the same class as well so I can't do:
div1
div2
div1
div2
etc...
here is what I have done so far:
http://jsfiddle.net/dp8yktcg/
and this is the simple CSS:
.baners{
width: 50%;
height: 65vw;
border:solid 1px #D8D8D8;
display:inline-block;
background:#FFF;
}
Could someone please advise on this issue?
They will never stay in the same line because of the 1 pixel border.
There are 2 ways you can make them stay in the same line.
The first (better) is to use box-sizing: border-box;
Doing so the element will be 50% width always, despite borders and padding.
The second is to use the calc function for the width.
width: calc(50% - 2px);
By using this function you will remove 2px of the borders from the total width.
Remember to update this if you add any padding or increase the border width! (Anyway i suggest you the first option)
EDIT
I forgot that there's an issue with display: inline-block; basically a whitespace will be added between the two elements, covering more than 100%. To prevent this you can just add float: left or add a negative margin to the right, like margin-right: -4px;
First set box-sizing property to border-box, then use float, or remove whitespace between divs:
.baners{
width: 50%;
height: 65vw;
border:solid 1px #D8D8D8;
display:inline-block;
background:#FFF;
box-sizing: border-box;
float: left;
}
<div class="someClass" >
<div class="baners" >
</div><div class="baners" >
</div><div class="baners" >
</div><div class="baners">
</div>
</div>
Instead of using display:inline-block, float them left and set the box-sizing to border-box.
.baners {
width: 50%;
height: 65vw;
border:solid 1px #D8D8D8;
float:left;
background:#eee;
box-sizing:border-box;
}
<div class="someClass">
<div class="baners"></div>
<div class="baners"></div>
<div class="baners"></div>
<div class="baners"></div>
</div>
I would use 'box-shadow' to accomplish this.
The problem is that 50% +1px is more than half of the screen and since your container isn't 100%+4px, the second box pushes to the next line, so what we want to do is essentially draw the border inside the 50%.
.baners{
box-shadow:0px 0px 0px 1px black inset;
width: 50%;
height: 65vw;
display:inline-block;
background:red;
float:left;
}
fiddle here: http://jsfiddle.net/dp8yktcg/7/
I have a page with a dynamic number of boxes that I would like to distribute over several columns and lines.
I have the following wishes:
Content of the boxes is different in height, but I want all div's in one 'line' to have the same height for visual appearance. They have a border and background color.
I'dd like to justify columns over the page width
Ideally I'dd like the page to be responsive, so the number of columns should adjust to the browser width. But after reading and watching a lot of examples I don't see how this is possible in combination with the justifying, as that always needs a row div.
So I'm going for a fixed number of columns. With all kinds of examples I came to this solution, but there is still one challenge: getting each div to have the same height:
http://jsfiddle.net/johannesklapwijk/BQJ6A/
HTML:
<div class='row'>
<div class='cell'>a<br/>b</div>
<div class='cell'>a<br/>b<br/>c</div>
<div class='cell'>a<br/>b</div>
<span class='stretch'/>
</div>
CSS:
.row {
text-align: justify;
border: 1px solid red;
padding: 0;
}
.cell {
display: inline-block;
width:30%;
height: 100%; /* does not get the height of the parent div */
border: 1px solid black;
background-color: green;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
I have two questions I guess:
The first question (might make the other absolete), is there a better solution, for example with jQuery to really make a dynamic grid of div's that distrubute nicely based on browser width?
If not: can the height problem be fixed?
Thanks!
So like this? (Change the con width to 100% if you want it the size of the browser)
HTML:
<div class="con">
<div class="col">asd</div>
<div class="col">asdasdasd
<br />asdas
<br />asdasd
<br />asdasd
<br />asdasd</div>
<div class="col">asd</div>
</div>
CSS
.con {
height: 100%;
width: 400px;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
border: #000000 solid 1px;
}
DEMO HERE
And for if you want it the size of the browser change width on .con
width: 100%;
DEMO HERE
and if you want the spacing like you have on yours add border-spacing to .con
border-spacing: 10px;
DEMO HERE
I've been trying to find something that meets my needs and I'm afraid CSS only is not enough.
I guess the jQuery freewall plug-in might give me what I need, even though it might be a bit heavy for my wishes.
http://vnjs.net/www/project/freewall/
So I know we can center a div horizontally if we use margin:0 auto;. Should margin:auto auto; work how I think it should work? Centering it vertically as well?
Why doesn't vertical-align:middle; work either?
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
JSFiddle
Update Aug 2020
Although the below is still worth reading for the useful info, we have had Flexbox for some time now, so just use that, as per this answer.
You can't use:
vertical-align:middle because it's not applicable to block-level elements
margin-top:auto and margin-bottom:auto because their used values would compute as zero
margin-top:-50% because percentage-based margin values are calculated relative to the width of containing block
In fact, the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent. Whenever a vertical margin's value is changed, it will trigger a parent element height re-calculation (re-flow), which would in turn trigger a re-center of the original element... making it an infinite loop.
You can use:
A few workarounds like this which work for your scenario; the three elements have to be nested like so:
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
border: 1px solid orange;
}
<div class="container">
<div class="helper">
<div class="content">
<p>stuff</p>
</div>
</div>
</div
JSFiddle works fine according to Browsershot.
Since this question was asked in 2012 and we have come a long way with browser support for flexboxes, I felt as though this answer was obligatory.
If the display of your parent container is flex, then yes, margin: auto auto (also known as margin: auto) will work to center it both horizontally and vertically, regardless if it is an inline or block element.
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
}
#child {
margin: auto auto;
}
<div id="parent">
<div id="child">hello world</div>
</div>
Note that the width/height do not have to be specified absolutely, as in this example jfiddle which uses sizing relative to the viewport.
Although browser support for flexboxes is at an all-time high at time of posting, many browsers still do not support it or require vendor prefixes. Refer to http://caniuse.com/flexbox for updated browser support information.
Update
Since this answer received a bit of attention, I would also like to point out that you don't need to specify margin at all if you're using display: flex and would like to center all of the elements in the container:
#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
<div id="parent">
<div>hello world</div>
</div>
Here's the best solution I've found: http://jsfiddle.net/yWnZ2/446/ Works in Chrome, Firefox, Safari, IE8-11 & Edge.
If you have a declared height (height: 1em, height: 50%, etc.) or it's an element where the browser knows the height (img, svg, or canvas for example), then all you need for vertical centering is this:
.message {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
You'll usually want to specify a width or max-width so the content doesn't stretch the whole length of the screen/container.
If you're using this for a modal that you want always centered in the viewport overlapping other content, use position: fixed; for both elements instead of position: absolute. http://jsfiddle.net/yWnZ2/445/
Here's a more complete writeup: http://codepen.io/shshaw/pen/gEiDt
Edit: it's 2020, I would use flex box instead.
Original answer:
Html
<body>
<div class="centered">
</div>
</body>
CSS
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I know the question is from 2012, but I found the easiest way ever, and I wanted to share.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
and CSS:
#parent{
height: 100%;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
If you know the height of the div you want to center, you can position it absolutely within its parent and then set the top value to 50%. That will put the top of the child div 50% of the way down its parent, i.e. too low. Pull it back up by setting its margin-top to half its height. So now you have the vertical midpoint of the child div sitting at the vertical midpoint of the parent - vertically centered!
Example:
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
http://jsfiddle.net/yWnZ2/2/
Those two solution require only two nested elements.
First - Relative and absolute positioning if the content is static (manual center).
.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);
}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%; left: 0%; right: 0%;
}
https://jsfiddle.net/GlupiJas/5mv3j171/
or for fluid design - for exact content center use below example instead:
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/GlupiJas/w3jnjuv0/
You need 'min-height' set in case the content will exceed 50% of window height. You can also manipulate this height with media query for mobile and tablet devices . But only if You play with responsive design.
I guess You could go further and use simple JavaScript/JQuery script to manipulate the min-height or fixed height if there is a need for some reason.
Second - if content is fluid u can also use table and table-cell css properties with vertical alignment and text-align centered:
/*in a wrapper*/
display:table;
and
/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;
Works and scale perfectly, often used as responsive web design solution with grid layouts and media query that manipulate the width of the object.
.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);
}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}
https://jsfiddle.net/GlupiJas/4daf2v36/
I prefer table solution for exact content centering, but in some cases relative absolute positioning will do better job especially if we don't want to keep exact proportion of content alignment.
.black {
display:flex;
flex-direction: column;
height: 200px;
background:grey
}
.message {
background:yellow;
width:200px;
padding:10px;
margin: auto auto;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
There isn't one easy way to center div vertically which would do the trick in every situation.
However, there are lots of ways to do it depending on the situation.
Here are few of them:
Set top and bottom padding of the parent element for example padding:20px 0px 20px 0px
Use table, table cell centers its' content vertically
Set parent element's position relative and the div's you want to vertically center to absolute and style it as top:50px; bottom:50px; for example
You may also google for "css vertical centering"
variable height ,margin top and bottom auto
.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
variable height ,margin top and bottom auto
Using Flexbox:
HTML:
<div class="container">
<img src="http://lorempixel.com/400/200" />
</div>
CSS:
.container {
height: 500px;
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
}
View result
I think you can fix that with Flexbox
.black {
height : 200px;
width : 200px;
background-color : teal;
border: 5px solid rgb(0, 53, 53);
/* This is the important part */
display : flex;
justify-content: center;
align-items: center;
}
.message {
background-color : rgb(119, 128, 0);
border: 5px solid rgb(0, 53, 53);
height : 50%;
width : 50%;
padding : 5px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
.black {
position:absolute;
/*
Replace with a one line inset property.
top:0;
bottom:0;
left:0;
right:0;
*/
inset: 0;
background:rgba(0,0,0,.5);
/*
Since no one has mentioned it yet,
here it is the grid display and
the place-content property.
*/
display:grid;
place-content: center;
}
.message {
background:yellow;
width:200px;
/*
There's no point here.
margin:auto auto;
*/
padding:10px;
}
<div class="black">
<div class="message">
This is a popup message.
</div>
</div>
<div style="display:flex">
<img src="" style="display:block !important; margin:auto">
</div>
To center an image in a div horizontally and vertically
.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
background:yellow;
width:200px;
padding:10px;
}
-
----------
<div class="black">
<div class="message">
This is a popup message.
</div>
I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem
Demo: http://jsfiddle.net/a5hP3/
Here's code anyway:
HTML:
<div class="box">
put it down, in center of box
</div>
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
}
.box a{
vertical-align:middle; //doesnt work
}
You can set the line-height equal to the height:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
line-height: 300px;
}
http://jsfiddle.net/a5hP3/3
There are two solutions:
First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.
Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:
<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
Some Text
</div>
SEE DEMO
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
position:relative;
}
.box a{
display:block;
position:absolute;
top:45%;
left:10% /* adjust based on link width */
}
Make the line-height the same as the container height...
http://jsfiddle.net/a5hP3/1/
Note: This solution only works when there is one line of text.
This is a problem better handled by javascript. (I'm using jQuery here):
http://jsfiddle.net/a5hP3/15/