css实现居中布局

本文相对来说都是代码，所以大家可以根据不同需求看相关样式实现，博主很懒，写的有点粗糙，勿喷，哈哈哈~~~😂

• 行内元素

 <div class="parent">
        <span class="child">counter</span>
    </div>

水平居中

方法1 text-align

 .parent {
   
            background-color: yellow;
            text-align:center
        }

方法2 fit-content

 .parent {
   
            background-color: yellow;
            width:fit-content;
            margin:auto;
        }

垂直居中

line-height（单行文本）

.parent {
   
            height: 500px; 
            line-height: 500px;
            background-color: yellow;
       }

• 块级元素

  <div class="parent">
        <div class="child"></div>
    </div>

水平居中 margin：0 auto

.parent{
   
            background-color: red;
            height: 100px;
        }
.child{
   
            background-color: yellow;
            margin: 0 auto;
            width: 100px;
            height: