Search notes:

CSS positioning: center an element horizontally

The following example tries to demonstrate how an element can be centered horizontally (but not vertically). It boils down to:

Setting the display property of the element that should be centered to block
Having the element's margin property equalt to 0 auto

<!DOCTYPE html>
<html>
<head>

  <title>Center div horizontally</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <style type='text/css'>

     body {
       margin: 0;
     }

     #container {
       position: fixed;
       width: 100%;
     }

     #center {
       margin:0 auto;
       width: 300px;
       margin-top:20px;
       border:#326 1px dotted;
       height:200px;
       background-color:#efe;
     }

     .elem { 
       position:absolute;
       border:#025 1px solid;
       color:#014;
       padding:1px;
       font-weight:bold;
      }

   </style>
  
</head>
<body>

  <div id='container'>
     <div id='center'>
       
        <div class='elem' style='margin-top:40px;margin-left:110px;'>40 from top, 110 from left</div>
        <div class='elem' style='margin-top:80px;margin-left:60px;'>80 from top, 60 from left</div>
     
     </div>
  </div>

</body>
</html>

Github repository about-css, path: /positioning/center/horizontally.html

CSS positioning: center an element horizontally

See also