metalx1000

HTML CSS Center DIV

Apr 1st, 2021
1,089
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>My Centered Tag</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <style>
  8.       html *{
  9.         font-size: 35px !important;
  10.         margin: 2px;
  11.       }
  12.       html,
  13.       body {
  14.         height: 100%;
  15.       }
  16.  
  17.       @media only screen and (min-width: 600px) {
  18.         body {
  19.           margin-right:200px;
  20.           margin-left:200px;
  21.           margin-top: 0;
  22.         }
  23.       }
  24.       .flex{
  25.         display: grid;
  26.         grid-row-gap: 1rem;
  27.         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  28.       }
  29.  
  30.       .grid{
  31.         display: grid;
  32.         place-items: center;
  33.       }
  34.  
  35.     </style>
  36.     <script>
  37.       document.addEventListener("DOMContentLoaded", function(){
  38.  
  39.       });
  40.     </script>
  41.   </head>
  42.   <body>
  43.     <div class="grid" style="height:100%">
  44.       <div>
  45.         <button class="button">Button #1</button>
  46.         <button class="button">Button #2</button>
  47.       </div>
  48.     </div>
  49.     <div class="grid" style="height:100%">
  50.       <div>
  51.         <button class="button">Button #1</button>
  52.         <button class="button">Button #2</button>
  53.       </div>
  54.     </div>
  55.   </body>
  56. </html>
  57.  
  58.  
RAW Paste Data