Advertisement
Advertisement


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.

2019/03/24
1
849
3/24/2019 10:51:28 AM

Accepted Answer

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
2012/03/07
1122
3/7/2012 4:48:20 PM

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>

2019/03/24

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>

2020/08/13

  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; }
2019/03/24

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

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;
}
2019/03/24

Source: https://stackoverflow.com/questions/953918
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]