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>
Is there any alternative to vertical-align?
For using vertical align I am having to set the display to table-cell. When I have the display set to table-cell the height of the div that I have set does not work. I have overflow-y set to auto on that div. What I am trying to do is align the content inside the div from the bottom of that div... I am not able to do that.. Any alternatives?
This is what I have right now:
#container{
height:375px;
border:1px solid #000;
position:relative;
overflow-y:auto;
display:table-cell;
vertical-align:bottom;
}
#container > div{
margin:0;
margin-bottom:5px;
width:660px;
position:relative;
}
There are 2 alternatives, one is to set line-height.. and other one is to set the parent element to position: relative; and than set your child element to position: absolute; and later, use top: 50%; and left: 50%; and than deduct the margins which will be 1/2 of the total height and width of the absolute element itself...
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* Assuming height of the element is 200 */
margin-left: -200px; /* Assuming width of the element is 400 */
}
Here's a catch though, using absolute will require fixed dimensions of the element you are trying to align vertically center
Vertical Aligning an element using display: table-cell;
Demo
.parent {
height: 200px;
background: #eee;
display: table-cell;
width: 300px;
vertical-align: bottom;
}
.child {
height: 20px;
background: #aaa;
}
Also it would be better if you use display: table; as a wrapping element.
try this:
#container{
height:375px;
line-height:375px;
}
#container > div{
display:inline-block;
line-height:1;
}
I have a div in a list item which is floated right. The div positions it self at the top right corner of the list item. Is it possible to position it in the middle-right without the use of padding or margins?
---------------
DIV
---------------
Needs to be:
---------------
DIV
---------------
I made a bunch of assumptions and didn't bother check this first.
li {
height: 32px;
}
li div {
width: 100%;
line-height: 32px;
text-align: center;
}
You could use the table cell method.
<div class="wrap one">
<div class="inner-wrap">
<div class="inner">Test</div>
</div>
</div>
With the CSS defining a parent as a table, then table-cell with vertical align:
.wrap .inner {
background: white;
float: right;
}
.wrap.one {
display: table;
width: 100%;
}
.wrap.one .inner-wrap {
display: table-cell;
vertical-align: middle;
}
Demo: http://jsfiddle.net/vFqSC/
If you want the div to take up the full space you could position the div this way:
li div {
float: right;
height: 100%;
}
or if you don't want it to take up the full space
li div {
position: absolute;
right: 0px;
top: 50%;
height:80%;
margin-top:-40%; // Half of height
}
If you have a hard coded list height and div height:
li { height: 50px; }
li div {
position: absolute;
right: 0px;
height:30px;
top: 10px;
}
There are many ways to do this, you should provide more information on how you want it to behave and look
Yes, you can, but margin or padding is the preferred method, but you could use relative positioning and assess a amount along on vertical axis. fiddle: http://jsfiddle.net/De4CV/1/
div {
width:200px;
height:200px;
background:#333;
}
div p {
font:1em normal Futura, sans-serif;
color:#f5f5f5;
text-align:right;
position:relative;
top:90px;
}
<div class="div">
<p>Hello there!</p>
</div>
I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.
How can I achieve that?
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}
<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>
You dont need absolute positioning
Use
p {
text-align: center;
line-height: 100px;
}
And adjust at will...
If text exceeds width and goes more than one line
In that case the adjust you can do is to include the display property in your rules as follows;
(I added a background for a better view of the example)
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Play with it in this JBin
To get left/right centering, then applying text-align: center to the div and margin: auto to the p.
For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div
♣you should do these steps :
the mother Element should be positioned(for EXP you can give it position:relative;)
the child Element should have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
for the child Element you should set "margin : auto" (to be middle vertically)
the child and mother Element should have "height"and"width" value
for mother Element => text-align:center (to be middle horizontally)
♣♣simply here is the summery of those 5 steps:
.mother_Element {
position : relative;
height : 20%;
width : 5%;
text-align : center
}
.child_Element {
height : 1.2 em;
width : 5%;
margin : auto;
position : absolute;
top:0;
bottom:0;
left:0;
right:0;
}
this is how I do it:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background-color: lightgreen;
}
.paragraph {
width: 250px;
background-color: lightyellow;
}
<div class="container">
<p class="paragraph">I want this paragraph to be at the center, but it's not.</p>
</div>
you can add text-align: center; to the paragraph if you want text alignment to be center
You only need to add text-align: center to your <div>
In your case also remove both styles that you added to your <p>.
Check out the demo here: http://jsfiddle.net/76uGE/3/
Good Luck
Centered and middled content ?
Do it this way :
<table style="width:100%">
<tr>
<td valign="middle" align="center">Table once ruled centering</td>
</tr>
</table>
I fiddled it here
Ha, let me guess .. you want DIVs ..
just make your first outter DIV behave like a table-cell then style it with vertical align:middle;
<div>
<p>I want this paragraph to be at the center, but I can't.</p>
</div>
div {
width:500px;
height:100px;
background-color:aqua;
text-align:center;
/* there it is */
display:table-cell;
vertical-align:middle;
}
jsfiddle.net/9Mk64/
on the p element, add 3 styling rules.
.myCenteredPElement{
margin-left: auto;
margin-right: auto;
text-align: center;
}
This solution works fine for all major browsers, except IE. So keep that in mind.
In this example, basicaly I use positioning, horizontal and vertical transform for the UI element to center it.
.container {
/* set the the position to relative */
position: relative;
width: 30rem;
height: 20rem;
background-color: #2196F3;
}
.paragh {
/* set the the position to absolute */
position: absolute;
/* set the the position of the helper container into the middle of its space */
top: 50%;
left: 50%;
font-size: 30px;
/* make sure padding and margin do not disturb the calculation of the center point */
padding: 0;
margin: 0;
/* using centers for the transform */
transform-origin: center center;
/* calling calc() function for the calculation to move left and up the element from the center point */
transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
}
<div class="container">
<p class="paragh">Text</p>
</div>
I hope this help.
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>