CSS HTML

[Solved – 10 Answers] CSS – How to align a
to the middle (horizontally/width) of the page

  • We have a div tag with width set to 800px. When the browser width is greater than 800px, it shouldn’t stretch the div but it should bring it to the middle of the page.

  • We can do this :
html code
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

  • position: absolute and then top:50% and left:50% places the top edge at vertically center of the screen, and left edge at horizontally center, then by adding margin-top to negative of height of the div i.e -100 shifts it above by 100, similarly for margin-left. This gets div exactly in the center of the page.
css code
<div id="outPopUp"></div>
#outPopUp 
{
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}

  • 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:
css code
html, body 
{ 
margin: 0; padding: 0; 
}
#centeredDiv 
{ 
margin-right: auto; margin-left: auto; width: 800px;
 }

HTML :

html code
<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS :

css code
body 
{
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}
.centered 
{
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

  • justify-content: center is used for the parent element to align the content to the center of it.

HTML :

html code
<div class="container">

  <div class="center">Center</div>

</div>

CSS :

css code
.container 
{
  display: flex;
  justify-content: center;
}
.center 
{
  width: 800px;
}

  • You can also use like this..
html code
<div style="width: 60%; margin: 0px auto;">
         Your Contents Here...
</div>

  • This is one of the solution :
css code
<div></div>
div 
{
  display: table;
  margin-right: auto;
  margin-left: auto;
}

  • Simply use center tag just after body tag, and end center tag just before body ends
html code
<body>
<center>
........your code here.....
</center>
</body>

See also  [Solved - 9 Answers] CSS - HTML - Stretch and scale a CSS image in the background - with CSS only

Use css flex property:

css code
body 
{                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}

Centering without specifying div width:

css code
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

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment

X