How to align a to the middle (horizontally/width) of the page
How to align a <div> to the middle (horizontally/width) of the page
I have a div tag with width set to 800px. When the browser width is greater than 800px, it shouldn't stretch the div but it should bring it to the middle of the page.
div
width
div
26 Answers
26
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Just make sure to apply 'text-align: center' to the <body> or else IE6 will not center the div. Then add text-align: left; to your div.
– avdgaag
Jun 5 '09 at 15:08
be sure to check HTML mode for IE6 or 7. If you use anything other than 4.01 strict you may have problems. Most of the time text-align works as avdgaag says.
– bartosz.r
Oct 6 '11 at 10:05
@rybo111 Then you don't need to. The idea is that 'left' is the default for text-align, and if it isn't restored then the entire div will inherit 'text-align: center'.
– jkdev
Oct 8 '15 at 23:54
why do you use width:800px ? will this work for all screens?
– themis
Oct 14 '15 at 14:25
position: absolute and then top:50% and left:50% places the top edge at vertically center of the screen, and left edge at horizontally center, then by adding margin-top to negative of height of the div i.e -100 shifts it above by 100, similarly for margin-left. This gets div exactly in the center of the page.
position: absolute
top:50%
left:50%
margin-top
margin-left
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></div>
Thx, your answer is the one and only cross-browser solution, it should be accepted...worth mentioning that it also works with "position:relative" if you have other divs on top and below (in this case only "left:50%" and "margin:0px -150px;" are important).
– Marcus
Nov 22 '13 at 14:51
position: fixed worked for me and might work best for anyone else where the added div is in some tree of absolute/relative divs already.
– ʍǝɥʇɐɯ
May 28 '14 at 14:04
This could be in percentage as well.
width:90%;left:50%;margin-left:45%;– iMatoria
Sep 25 '15 at 3:30
width:90%;left:50%;margin-left:45%;
"position: fixed" works better
– Alex Parij
Dec 1 '16 at 20:48
using
transform: translateX(-50%) is more versatile than using a negative margin as a way to account for the div's width. same applies for translateY and height– mwag
Dec 7 '17 at 21:39
transform: translateX(-50%)
Do you mean that you want to center it vertically or horizontally? You said you specified the height to 800px, and wanted the div not to stretch when the width was greater than that...
height
width
To center horizontally, you can use the margin: auto; attribute in css. Also, you'll have to make sure that the body and html elements don't have any margin or padding:
margin: auto;
body
html
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Modern Flexbox solution is the way to go in/from 2015. justify-content: center is used for the parent element to align the content to the center of it.
justify-content: center
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Output
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
To make it also work correctly in Internet Explorer 6 you have to do it as following:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
Or go out from quircks mode and use a strict mode, it helps a lot, when you want to use features like hover, auto-margins and many others.
– bartosz.r
Oct 6 '11 at 10:06
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
this is what i needed. thanks. using the more upvoted answers would only help to position a popup. this answer helps position any div in the center horizontally.
– dresh
Jan 5 '17 at 12:48
You can also use it like this:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
This answer is useful when you don't want to set the width to a fix pixels of 800px. The size can be 80% and it will cover 80% of the screen size available, which seems more dynamic.
– KamalSoni
Mar 7 '17 at 23:19
Simply use center tag just after body tag, and end center tag just before body ends
<body>
<center>
........your code here.....
</center>
</body>
This worked for me with all the browsers I have tried
The
<center> tag was deprecated in html 4– ManseUK
May 11 '12 at 10:52
<center>
It may have been depreciated, but it's still the simplest solution and works on all browsers.
– Bill Masters
Aug 16 '15 at 2:41
@BillMasters May be it is working now but at some time in future it will become obsolete.
– Mohammad Usman
Dec 15 '16 at 7:46
@MohammadUsman I think this tag would survive longer than some fancy ES6 module npm dependency shit.
– est
Aug 30 '17 at 9:02
<center> is the savior we all need.
– dawn
Jun 10 at 15:18
Add this class to the div you want centered (which should have a set width):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Or, add the margin stuff to your div class, like this:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
PS, this is margin: 0 auto;
– Chris Aplin
Jan 27 '15 at 23:03
@ChrisAplin This works for me fine as is. Did you downvote because of this? Not necessary. Someone downvoted this for no apparent reason this is working fine for me I use it everywhere.
– Taylor Brown
Feb 26 '16 at 14:50
.divClass works without width:300px; Thanks!!!
– JRichardsz
Mar 12 '17 at 1:06
Use css flex property: http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* centerized */
display: box;
flex-align: center;
flex-pack: center;
}
So this doesn't work on IE?
– Umair
Apr 10 '14 at 19:53
This can be easily achieved via flex container.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
Preview Link
Some other pre-existing setups from older code that will prevent div page centering L&R are:
1) other classes hidden in external stylesheet links.
2) other classes embedded in something like an img (like for older external CSS Print format controls).
3) legend code with IDs and/or CLASSES will conflict with a named div class.
Centering without specifying div width:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
This is something like <center> tag does, except:
<center>
<h1>
<center>
display:block
body, html{
display:table;
height:100%;
width:100%;
}
.container{
display:table-cell;
vertical-align:middle;
}
.container .box{
width:100px;
height:100px;
background:red;
margin:0 auto;
}
http://jsfiddle.net/NPV2E/
"width:100%" for "body" tag it's only for example. In real project you may remove this property.
I recommend Andrei's solution. Working fine in center with all aspects.
– Super Model
Jul 14 '17 at 19:49
If you have some regular content and not only one line of text, so only possible reason I know is to calculate margin.
Here is an example:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
So, #supercontainer is your "whole page" and it's width is 1200px.#middlecontainer is div with content of your site; it's width 102px. In case, the width of content is known, you need to divide page's size to 2, and substruct from result half of content's width:
1200 / 2 - (102 / 2) = 549;
#supercontainer
"whole page"
width
1200px
#middlecontainer
div
width
102px
width
width
Yes, I'm also see that this is DER GROSSE fail of CSS.
Use justify-content and align-items to horizontally and vertically align a div
justify-content
align-items
div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content
https://developer.mozilla.org/en/docs/Web/CSS/align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
This works in IE also, Auto Margins do not.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
I tried it out: jsfiddle.net/nqEar/show On my monitor (1920px) on Chrome 22 it is not centered.
– surfmuggle
Oct 28 '12 at 7:54
Div centered vertically and horizontally inside parent without fixing content size
Check out this example (click).
Very simple, and works for flexible heights too.
Perfect if you don't have content with fixed height.
And here (click) is a nice overview with some other solutions.
And here (click) another example with a flexible width solution with the famous -50% trick
Simple http://jsfiddle.net/8pd4qx5r/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
Use the below code for centering the div box:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-content">
</div>
.middle {
margin: auto;
text-align: center;
}
If your center content is deep inside other divs then only margin can save you. Nothing else. I face it always when not using framework like Bootstrap.
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
If you want to change the vertical position, change the value of 250 and you can arrange the content as per your need. There is no need to give the width and other parameters.
In my case, the phone screen size is unknown, here is what I did.
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border:0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JS(before you need to show this DIV)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
A pretty old question with a lot of answers, but for some reason none of them worked for me really. This is what worked for me and it works across browser as well:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
}
get the width of the screen
than make margin left 25%
make margin right 25%
in this way the content of your container will sit in the middle .
example : suppose that container width = 800px;
<
div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
'left':'-(device-width/0.25)px';
'right':'-(device-width/0.225)px';
});
}
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
This is correct for demo purposes, but obviously not using inline styles in the final markup
– gonzohunter
Jun 5 '09 at 10:36