How to align a <div> to the middle (horizontally/width) of the page
CssHtmlAlignmentCenterCss Problem Overview
I have a div
tag with width
set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div
, but it should bring it to the middle of the page.
Css Solutions
Solution 1 - Css
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Solution 2 - Css
position: absolute
and then top:50%
and left:50%
places the top edge at the vertical center of the screen, and the left edge at the horizontal center, then by adding margin-top
to the negative of the height of the div, i.e., -100 shifts it above by 100 and similarly for margin-left
. This gets the div
exactly in the center of the page.
#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>
Solution 3 - Css
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.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
Output
.container {
display: flex;
justify-content: center;
}
.center {
width: 400px;
padding: 10px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
Solution 4 - Css
-
Do you mean that you want to center it vertically or horizontally? You said you specified the
height
to 800 pixels, and wanted the div not to stretch when thewidth
was greater than that... -
To center horizontally, you can use the
margin: auto;
attribute in CSS. Also, you'll have to make sure that thebody
andhtml
elements don't have any margin or padding:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Solution 5 - Css
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
Solution 6 - Css
To make it also work correctly in Internet Explorer 6 you have to do it as follows:
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;
}
Solution 7 - Css
You can also use it like this:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
Solution 8 - Css
Div centered vertically and horizontally inside the parent without fixing the content size
Here on this page is a nice overview with several solutions, too much code to share here, but it shows what is possible...
Personally I like this solution with the famous transform translate -50% trick the most. It works well for both fixed (% or px) and undefined height and width of your element.
The code is as simple as:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome*/
-o-transform: translate(-50%, -50%); /* Opera */
transform: translate(-50%, -50%);
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Here a fiddle that shows that it works
Solution 9 - Css
Simply use the center
tag just after the body
tag, and end the center
tag just before body
ends:
<body>
<center>
... Your code here ...
</center>
</body>
This worked for me with all the browsers I have tried.
Solution 10 - Css
This can be easily achieved via flex container.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
Solution 11 - Css
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;
}
Solution 12 - Css
Use the CSS flex property: http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
Solution 13 - Css
Some other pre-existing setups from older code that will prevent div page centering L&R are:
- Other classes hidden in external stylesheet links.
- Other classes embedded in something like an
img
(like for older external CSS print format controls). - Legend code with IDs and/or CLASSES will conflict with a named
div
class.
Solution 14 - Css
If you have some regular content, and not only one line of text, the 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 its 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 the page's size to 2, and subtract half of content's width
from the result:
1200 / 2 - (102 / 2) = 549;
Yes, I'm also seeing that this is der grosse fail of CSS.
Solution 15 - Css
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:
- all direct inline childs elements (eg.
<h1>
) of<center>
will also positioned to center - inline-block element can have different size (comapred to
display:block
setting) according to browser defaults
Solution 16 - Css
.middle {
margin:0 auto;
text-align: center;
}
/* it brings div to center */
Solution 17 - Css
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>
Solution 18 - Css
parent {
position: relative;
}
child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<parent>
<child>
</child>
</parent>
Solution 19 - Css
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;
}
"width:100%" for the "body" tag is only for an example. In a real project you may remove this property.
Solution 20 - Css
Use justify-content
and align-items
to horizontally and vertically align a 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>
Solution 21 - Css
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;
}
Solution 22 - Css
This also works in Internet Explorer, but auto margins do not.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
Solution 23 - Css
If your center content is deep inside other divs then only margin can save you. Nothing else. I face it always when not using a framework like Bootstrap.
Solution 24 - Css
In my case, the phone screen size is unknown, and 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;
}
JavaScript (before you need to show this DIV)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
Solution 25 - Css
<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.
Solution 26 - Css
For some reason, none of the previous answers worked for me really. This is what worked for me and it works across browsers 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;
}
Solution 27 - Css
- Get the width of the screen.
- Then 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';
});
}