css八种元素居中的几种方法

css元素居中八种方法

公共代码

.father {
  width: 100px;
  height: 100px;
  background： yellowgreen;
}
.child{
width: 50px;
height: 50px;
background: red;
}
<div class="father">
  <div class="child"></div>
</div>

01 css居中第一种方法

01 父元素定位设置position,并且知道父子元素的尺寸大小

.father {
  position: relative;
}
.child {
position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 right: 0;
 margin: auto
}

02 css居中第二种方法

.father {
  position: relative;
}
.child {
position: absolute;
 left: 50%;
 top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

03 css居中第三种方法

.father{
  position: relative;
}
.child {
position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%)
}

04 css居中第四种方法

.father{
            display: flex;
            justify-content: center;
            align-items: center;
}

05 css居中第五种方法

        .father {
            display: grid;
            justify-content: center;
            align-content: center;
        }

06 css居中第六种方法

        .father {
            display: grid;
        }
        .child {
           justify-self: center;
           align-self: center;
        }

07 css居中第七种方法

        .father {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .child{
            display: inline-block;
        }

08 css居中第八种方法

        .father {
            line-height: 100px;
            text-align: center;
            font-size:0;
        }
        .child{
            display: inline-block;
            vertical-align: middle;
            font-size: 12px;
        }