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: 
<!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

See also

Centering an element on client area and on content
CSS Snippets

Index

Fatal error: Uncaught PDOException: SQLSTATE[HY000]: General error: 8 attempt to write a readonly database in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php:78 Stack trace: #0 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(78): PDOStatement->execute(Array) #1 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(30): insert_webrequest_('/notes/developm...', 1759422497, '216.73.216.42', 'Mozilla/5.0 App...', NULL) #2 /home/httpd/vhosts/renenyffenegger.ch/httpsdocs/notes/development/web/CSS/positioning/center/horizontally(100): insert_webrequest() #3 {main} thrown in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php on line 78