水平垂直居中

几种水平垂直居中

固定宽高

1. margin 负值

<div class="a">
    <div class="a1"></div>
</div>

.a {
    width: 500px;
    height: 300px;
    border: 1px solid cadetblue;
    position: relative;
}

.a1 {
    width: 100px;
    height: 100px;
    background-color: chocolate;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

2. calc

<div class="b">
    <div class="b1"></div>
</div>

     .b {
         width: 500px;
         height: 300px;
         border: 1px solid cadetblue;
         position: relative;
     }

     .b1 {
         width: 100px;
         height: 100px;
         background-color: chocolate;
         position: absolute;
         left: calc(50% - 50px);
         top: calc(50% - 50px);
     }

3. margin auto

 <div class="c">
     <div class="c1"></div>
 </div>

.c {
    width: 500px;
    height: 300px;
    border: 1px solid cadetblue;
    position: relative;
}

.c1 {
    width: 100px;
    height: 100px;
    background-color: chocolate;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

不固定宽高

1. flex

    <div class="d">
        <div class="d1">inner</div>
    </div>

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

2. transform

<div class="e">
    <div class="e1">inner</div>
</div>

.e {
    position: relative;
}

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