标签的水平居中方法

  1. // 可以让div、p、h（大盒子）水平居中
  2. margin:0 auto
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         /* 清除浏览器的默认样式 */
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         /* 根设置宽高为100% */
  15.         html,
  16.         body {
  17.             width: 100%;
  18.             height: 100%;
  19.             overflow: hidden;
  20.             background-color: chocolate;
  21.         }
  23.         /* 水平居中 */
  24.         .contianer {
  25.             width: 100px;
  26.             margin: 0 auto;
  27.             background-color: aqua;
  28.         }
  29.     </style>
  30. </head>
  32. <body>
  33.     <div class="contianer">
  34.         <span>水平居中</span>
  35.     </div>
  36. </body>
  38. </html>