How to align a <div> to the middle (horizontally/width) of the page

Shimmy_75500 0
Viewed 3046386

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.

center alignment css html
27 Answers
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
user_14230

  1. 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 the width was greater than that...

  2. 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:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
user_380550

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;
}
user_966900 

parent {
    position: relative;
}
child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
<parent>
  <child>
  </child>
</parent>

Admin1 
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 the "body" tag is only for an example. In a real project you may remove this property.

user_17387770

This also works in Internet Explorer, but auto margins do not.

.centered {
    position: absolute;
    display:  inline-block;
    left:     -500px;
    width:    1000px;
    margin:   0 50%;
}
user_13226300

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.

user_42940150

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();
user_73412860
  • 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';
    });
}
user_87514430
Related