By Shimmy


2009-06-05 01:44:38 8 Comments

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.

27 comments

@Levon 2018-08-17 21:12:28

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

@Manoj Kumar 2015-08-17 17:25:29

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.

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>

@KBH 2015-06-18 14:14:13

.middle {
   margin:0 auto;
   text-align: center;
}

/* it brings div to center */

@Wrong 2019-07-21 13:44:44

this aligns the text into the div too

@Wilt 2013-04-30 12:27:31

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%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* for IE 9 */
  -webkit-transform: translate(-50%, -50%); /* for Safari */

  /* optional size in px or %: */
  width: 100px;
  height: 100px;
}

Here a fiddle that shows that it works

@Peter Mortensen 2019-03-24 11:07:32

The second link is effectively broken ("This Web page is parked for FREE...").

@Wilt 2019-03-24 16:19:48

@PeterMortensen I improved my answer by replacing the link with a new one with similar solution and by adding the code to the answer to prevent such problems in the future (link only answers are no good). Also removed the link to the first solution because it wasn't that great actually.

@Joseph 2019-04-14 16:12:18

This worked for me. It also works when you do not specify width of div in css and when you also decide to specify the width in css. Thank you.

@mark dibe 2018-05-25 19:55:26

  • 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';
    });
}

@Edye Chan 2017-10-21 04:02:15

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();

@Nurul Akter Towhid 2016-10-25 22:07:25

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.

@Osei-Bonsu Christian 2015-10-29 08:13:23

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

@Andrii Gordiichuk 2013-11-19 16:09:45

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.

@Super Model 2017-07-14 19:49:06

I recommend Andrei's solution. Working fine in center with all aspects.

@user1125394 2013-03-30 19:25:54

Use the CSS flex property: http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* Centered */
  display: box;
  flex-align: center;
  flex-pack: center;
}

@Umair 2014-04-10 19:53:25

So this doesn't work on IE?

@Toothbrush 2018-09-28 15:19:46

This is the old Flex syntax which is not used/supported now.

@Summo 2012-05-29 07:55:15

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>

@Marcus 2013-11-22 14:51:17

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).

@ʍǝɥʇɐɯ 2014-05-28 14:04:07

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.

@iMatoria 2015-09-25 03:30:07

This could be in percentage as well. width:90%;left:50%;margin-left:45%;

@Alex Parij 2016-12-01 20:48:32

"position: fixed" works better

@mwag 2017-12-07 21:39:10

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

@Shayan 2019-09-04 21:25:19

Didn't work for my div which has a table in it.

@Dennis Struck 2012-05-16 17:20:32

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.

@Bharat Chhatre 2012-05-11 10:45:32

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.

@Manse 2012-05-11 10:52:16

The <center> tag was deprecated in html 4

@Bill Masters 2015-08-16 02:41:29

It may have been depreciated, but it's still the simplest solution and works on all browsers.

@Mohammad Usman 2016-12-15 07:46:30

@BillMasters May be it is working now but at some time in future it will become obsolete.

@est 2017-08-30 09:02:31

@MohammadUsman I think this tag would survive longer than some fancy ES6 module npm dependency shit.

@dawn 2018-06-10 15:18:45

<center> is the savior we all need.

@Glen 2012-04-09 20:02:04

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

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

@surfmuggle 2012-10-28 07:54:23

I tried it out: jsfiddle.net/nqEar/show On my monitor (1920px) on Chrome 22 it is not centered.

@rodnower 2010-11-26 20:48:20

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.

@Kevin Dungs 2009-06-05 07:54:07

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

@bartosz.r 2011-10-06 10:06:09

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.

@Tomas Aschan 2009-06-05 01:47:42

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

@Roy 2017-08-28 18:17:16

This can be easily achieved via flex container.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

Preview Link

@Taylor Brown 2014-02-10 16:16:01

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

@Chris Aplin 2015-01-27 23:03:45

PS, this is margin: 0 auto;

@Taylor Brown 2016-02-26 14:50: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.

@JRichardsz 2017-03-12 01:06:23

.divClass works without width:300px; Thanks!!!

@Santosh Khalse 2016-12-15 07:43:23

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>

@Aashutosh Shrivastava 2014-10-29 11:50:55

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

@RajeshKdev 2012-12-01 10:45:36

You can also use it like this:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>

@Kamal Soni 2017-03-07 23:19:01

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.

@JFathi 2016-11-03 18:23:22

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>

@Mohammad 2013-01-16 15:06:53

<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

@dresh 2017-01-05 12:48:56

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.

@A. Kali 2019-10-02 17:13:54

Funny this is the simplest answer and the only one that is actually correct. Should get more votes.

@user669677 2014-01-31 12:25:05

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

@user3439263 2015-01-16 17:35:15

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

@AgileJon 2009-06-05 01:49:10

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

@gonzohunter 2009-06-05 10:36:57

This is correct for demo purposes, but obviously not using inline styles in the final markup

@avdgaag 2009-06-05 15:08:36

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.

@bartosz.r 2011-10-06 10:05:00

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.

@jkdev 2015-10-08 23:54:06

@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'.

@themhz 2015-10-14 14:25:53

why do you use width:800px ? will this work for all screens?

@AgileJon 2015-10-15 16:29:12

@themis - I only used 800px because the original question wanted that as the max width.

@Shreyan Mehta 2017-05-19 19:00:03

not working...:/

@Hassan Baig 2018-03-29 16:16:04

@gonzohunter: why not?

@Luciano Andress Martini 2018-04-12 13:25:28

not working here too.. it is doing nothing... the text is still on the top of the page... =[

@Jerry Dodge 2018-05-13 00:42:35

Works fine here. I used max-width instead of just width. Allows it to scale down. "the text is still on the top of the page..." This is not related to vertical alignment. It's related to horizontal alignment. Also, why are we talking about IE 6-7 in 2011? IE7 was already on its downfall. Why are we talking about IE at all? Do people still use IE these days?

Related Questions

Sponsored Content

104 Answered Questions

[SOLVED] How to horizontally center a <div>?

38 Answered Questions

[SOLVED] How can I make a div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1366632 View
  • 1981 Score
  • 38 Answer
  • Tags:   html css width

33 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1897873 View
  • 2055 Score
  • 33 Answer
  • Tags:   html css height

33 Answered Questions

[SOLVED] Font scaling based on width of container

35 Answered Questions

[SOLVED] How to vertically align an image inside a div

38 Answered Questions

[SOLVED] How to align checkboxes and their labels consistently cross-browsers

22 Answered Questions

[SOLVED] Where should I put <script> tags in HTML markup?

25 Answered Questions

[SOLVED] How to align content of a div to the bottom

21 Answered Questions

[SOLVED] Expand a div to fill the remaining width

18 Answered Questions

[SOLVED] How to align 3 divs (left/center/right) inside another div?

Sponsored Content