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

Question

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.

You can use **flexbox** applying `display: flex;` and `align-items: center; justify-content: center` — bpardo, Mar 02 '21 at 16:50

score 1202 · Accepted Answer · edited Mar 07 '12 at 16:48

1202

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

edited Mar 07 '12 at 16:48

thirtydot

217,782
47
385
346

answered Jun 05 '09 at 01:49

AgileJon

52,296
4
39
38

48

This is correct for demo purposes, but obviously not using inline styles in the final markup – gonzohunter Jun 05 '09 at 10:36
67

Just make sure to apply 'text-align: center' to the or else IE6 will not center the div. Then add text-align: left; to your div. – avdgaag Jun 05 '09 at 15:08
2

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 06 '11 at 10:05
1

@rybo111 Then you don't need to. The idea is that 'left' is the default for [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align), and if it isn't restored then the entire div will inherit 'text-align: center'. – jkdev Oct 08 '15 at 23:54
5

why do you use width:800px ? will this work for all screens? – themhz Oct 14 '15 at 14:25
@themis - I only used 800px because the original question wanted that as the max width. – AgileJon Oct 15 '15 at 16:29
1

not working...:/ – Shreyan Mehta May 19 '17 at 19:00
@gonzohunter: why not? – Hassan Baig Mar 29 '18 at 16:16
1

not working here too.. it is doing nothing... the text is still on the top of the page... =[ – Luciano Andress Martini Apr 12 '18 at 13:25
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? – Jerry Dodge May 13 '18 at 00:42
I would say it's a neater and elegant solution! – Arun Ramachandran Jun 13 '20 at 12:14
– Feng Zhang Feb 11 '21 at 20:14

score 337 · Answer 2 · edited Mar 24 '19 at 11:04

337

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>

edited Mar 24 '19 at 11:04

Peter Mortensen

30,030
21
100
124

answered May 29 '12 at 07:55

Summo

3,395
1
12
2

16

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
4

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 03:30
1

"position: fixed" works better – Alex Parij Dec 01 '16 at 20:48
6

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 07 '17 at 21:39
Didn't work for my `div` which has a `table` in it. – Shayan Sep 04 '19 at 21:25
@mwag `transform: translate` blurs the content for me. I'm trying to find something alternative for that actually. – MattSom Mar 15 '20 at 15:12
@MattSom have you tried adjusting anti-aliasing e.g. https://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d? – mwag Mar 15 '20 at 18:41

m4n0 · Answer 3 · 2021-09-12T02:42:50.683

160

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>

edited Sep 12 '21 at 02:42

answered Aug 17 '15 at 17:25

m4n0

27,411
26
71
84

3

As you can see it's enable highlights for `css` – johannchopin Apr 17 '20 at 18:37

score 65 · Answer 4 · edited Mar 24 '19 at 10:53

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

score 57 · Answer 5 · edited Feb 04 '16 at 12:15

57

<div></div>

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

edited Feb 04 '16 at 12:15

Igor Ivancha

3,309
4
30
39

answered Jan 16 '13 at 15:06

Mohammad

589
4
4

3

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 05 '17 at 12:48
Funny this is the simplest answer and the only one that is actually correct. Should get more votes. – A. Kali Oct 02 '19 at 17:13
This CSS has to be the best way to do it. You can set the width 80% here, and then in the inner-div, set it to 100%. And this way, it will scale correctly with the browser resizing. I love it. Thank you very much. – CodingEE Apr 27 '20 at 14:51

score 40 · Answer 6 · edited Mar 24 '19 at 10:53

40

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

edited Mar 24 '19 at 10:53

Peter Mortensen

30,030
21
100
124

answered Jun 05 '09 at 07:54

Kevin Dungs

1,535
1
12
18

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 06 '11 at 10:06

score 31 · Answer 7 · edited Mar 29 '17 at 22:41

31

You can also use it like this:

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

edited Mar 29 '17 at 22:41

Peter Mortensen

30,030
21
100
124

answered Dec 01 '12 at 10:45

RajeshKdev

6,187
6
55
77

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. – Kamal Soni Mar 07 '17 at 23:19

Wilt · Answer 8 · 2022-04-08T08:27:06.027

30

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

edited Apr 08 '22 at 08:27

answered Apr 30 '13 at 12:27

Wilt

37,062
11
138
192

The second link is effectively broken (*"This Web page is parked for FREE..."*). – Peter Mortensen Mar 24 '19 at 11:07
@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. – Wilt Mar 24 '19 at 16:19
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. – Joseph Apr 14 '19 at 16:12

score 23 · Answer 9 · edited Mar 24 '19 at 11:01

23

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.

edited Mar 24 '19 at 11:01

Peter Mortensen

30,030
21
100
124

answered May 11 '12 at 10:45

Bharat Chhatre

305
3
6

43

The `` tag was [deprecated in html 4](https://developer.mozilla.org/en/HTML/Element/center) – Manse May 11 '12 at 10:52
10

It may have been depreciated, but it's still the simplest solution and works on all browsers. – Bill Masters Aug 16 '15 at 02:41
@BillMasters May be it is working now but at some time in future it will become obsolete. – Mohammad Usman Dec 15 '16 at 07:46
2

@MohammadUsman I think this tag would survive longer than some fancy ES6 module npm dependency shit. – est Aug 30 '17 at 09:02
1

is the savior we all need. – dawn Jun 10 '18 at 15:18

score 20 · Answer 10 · answered Aug 28 '17 at 18:17

20

This can be easily achieved via flex container.

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

.item{
 align-self: center;
}

Preview Link

answered Aug 28 '17 at 18:17

Roy

451
5
14

Taylor Brown · Answer 11 · 2017-03-31T13:36:07.800

13

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

edited Mar 31 '17 at 13:36

answered Feb 10 '14 at 16:16

Taylor Brown

1,590
2
16
31

3

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
1

.divClass works without width:300px; Thanks!!! – JRichardsz Mar 12 '17 at 01:06

score 12 · Answer 12 · edited Mar 24 '19 at 11:05

12

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

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

edited Mar 24 '19 at 11:05

Peter Mortensen

30,030
21
100
124

answered Mar 30 '13 at 19:25

1

So this doesn't work on IE? – Umair Apr 10 '14 at 19:53
This is the old Flex syntax which is not used/supported now. – Toothbrush Sep 28 '18 at 15:19

score 7 · Answer 13 · edited Mar 24 '19 at 11:02

7

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.

edited Mar 24 '19 at 11:02

Peter Mortensen

30,030
21
100
124

answered May 16 '12 at 17:20

Dennis Struck

71
1
1

score 6 · Answer 14 · edited Feb 04 '16 at 11:53

6

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

edited Feb 04 '16 at 11:53

Igor Ivancha

3,309
4
30
39

answered Jan 31 '14 at 12:25

just
is enough
– Feng Zhang Feb 11 '21 at 20:13

score 6 · Answer 15 · edited Jun 25 '19 at 08:39

6

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

/* it brings div to center */

edited Jun 25 '19 at 08:39

Elvin Jafarov

39
1
1
9

answered Jun 18 '15 at 14:14

KBH

295
3
9

this aligns the text into the div too – Wrong Jul 21 '19 at 13:44

score 6 · Answer 16 · edited Mar 29 '17 at 22:50

6

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>

edited Mar 29 '17 at 22:50

Peter Mortensen

30,030
21
100
124

answered Dec 15 '16 at 07:43

Santosh Khalse

10,808
3
34
36

this worked best for me, easiest and the most straight forward way to align div in center of page – Vicky Gupta Mar 06 '21 at 08:43

score 6 · Answer 17 · edited Mar 24 '19 at 10:59

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.

score 6 · Answer 18 · edited Jan 01 '20 at 01:54

6

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

<parent>
  <child>
  </child>
</parent>

edited Jan 01 '20 at 01:54

VFDan

802
11
26

answered Aug 17 '18 at 21:12

score 5 · Answer 19 · edited Mar 24 '19 at 11:08

5

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.

edited Mar 24 '19 at 11:08

Peter Mortensen

30,030
21
100
124

answered Nov 19 '13 at 16:09

Andrii Gordiichuk

1,435
11
10

I recommend Andrei's solution. Working fine in center with all aspects. – dev Jul 14 '17 at 19:49

toto11 · Answer 20 · 2016-11-03T18:30:08.127

5

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>

edited Nov 03 '16 at 18:30

answered Nov 03 '16 at 18:23

toto11

1,412
1
15
18

This should be the accepted answer.... – Jun 08 '20 at 14:20

score 4 · Answer 21 · edited Feb 04 '16 at 11:47

4

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

edited Feb 04 '16 at 11:47

Igor Ivancha

3,309
4
30
39

answered Jan 16 '15 at 17:35

score 3 · Answer 22 · edited Mar 24 '19 at 11:00

3

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

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

edited Mar 24 '19 at 11:00

Peter Mortensen

30,030
21
100
124

answered Apr 09 '12 at 20:02

Glen

39
1

I tried it out: http://jsfiddle.net/nqEar/show/ On my monitor (1920px) on Chrome 22 it is not centered. – surfmuggle Oct 28 '12 at 07:54

score 2 · Answer 23 · edited Mar 24 '19 at 11:23

2

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.

edited Mar 24 '19 at 11:23

Peter Mortensen

30,030
21
100
124

answered Oct 25 '16 at 22:07

Nurul Akter Towhid

2,708
1
31
35

score 2 · Answer 24 · edited Mar 24 '19 at 11:25

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

score 1 · Answer 25 · edited Mar 29 '17 at 22:49

1

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

edited Mar 29 '17 at 22:49

Peter Mortensen

30,030
21
100
124

answered Oct 29 '14 at 11:50

Aashutosh Shrivastava

379
7
23

score 1 · Answer 26 · edited Mar 24 '19 at 11:22

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

score 1 · Answer 27 · edited Mar 24 '19 at 11:27

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

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

27 Answers27

HTML

CSS

Linked

Related

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

27 Answers27

HTML

CSS

Linked

Related

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