CSS样式-不同元素的居中方式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  /* 这种方式效率更高 */
    body,
    div {
      margin: 0;
      padding: 0;
    }
 
    body>div {
      height: 200px;
      border-bottom: 1px solid #000;
      /*文字的居中方式-左右居中、上下居中;但是这种方式对块级元素不生效*/
      text-align: center;
      line-height: 200px;
    }
 
    #hezi {
      width: 50px;
      height: 50px;
      background-color: #f00;
 
      /* 经典的块级元素水平居中的办法 */
      margin: 0 auto; 
    }
  </style>
</head>
<body>
  <div>
    <div id="hezi"></div>
  </div>
  <div>
    ABCDE
  </div>
</body>
</html>
posted @ 2021-02-22 15:33  #Friday  阅读(66)  评论(0)    收藏  举报