水平垂直居中布局的多种实现方式

分手后的思念是犯贱 2022-04-06 03:11 192阅读 0赞

下面为公共代码：

<div class="box">
        <div class="small">small</div>
    </div>

.box { 
        width: 300px;
        height: 300px;
        background: #ddd;
    }
    .small { 
        background: red;
    }

### 水平垂直居中–>>`absolute` \+ `margin`实现 ###

#### `absolute` \+ `margin` 第1种 ####

.box { 
        position: relative;
    }
    .small { 
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
        width: 100px;
        height: 100px;
    }

[Open in CodePen][]

#### `absolute` \+ `margin` 第2种 ####

.box { 
        position: relative;
    }
    .small { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100px;
        height: 100px;
    }

[Open in CodePen][Open in CodePen 1]

### 水平垂直居中–>>`absolute` \+ `calc` 实现 ###

.box { 
        position: relative;
    }
    .small { 
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
        width: 100px;
        height: 100px;
    }

[Open in CodePen][Open in CodePen 2]

### 水平垂直居中–>>`absolute` \+ `transform` 实现 ###

.box { 
        position: relative;
    }
    .small { 
        position: absolute;
        top: 50%;
        left: 50%;
        /* transform: translate(-50%,-50%); */
        transform: translate3d(-50%,-50%,0);
        width: 100px;
        height: 100px;
    }

[Open in CodePen][Open in CodePen 3]

### 水平垂直居中–>>转行内元素 ###

.box { 
        line-height: 300px;
        text-align: center;
        font-size: 0px;
    }
    .small { 
        padding: 6px 10px;
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        line-height: 16px;
    }

[Open in CodePen][Open in CodePen 4]

### 水平垂直居中–>>`table-cell` ###

.box { 
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .small { 
        padding: 6px 10px;
        display: inline-block;
    }

[Open in CodePen][Open in CodePen 5]

### 水平垂直居中–>>`flex` ###

#### `flex` 第1种 ####

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

[Open in CodePen][Open in CodePen 6]

#### `flex` 第2种 ####

.box { 
        display: flex;
        justify-content: center;
    }
    .small { 
        align-self: center;
    }

[Open in CodePen][Open in CodePen 7]

### 水平垂直居中–>>`grid` ###

#### `grid` 第1种 ####

.box { 
        display: grid;
        justify-items: center;
        align-items: center;
    }

[Open in CodePen][Open in CodePen 8]

#### `grid` 第2种 ####

.box { 
        display: grid;
    }
    .small { 
        justify-self: center;
        align-self: center;
    }

[Open in CodePen][Open in CodePen 9]

#### `grid` 第3种 ####

.box { 
        display: grid;
        justify-items: center;
    }
    .small { 
        align-self: center;
    }

[Open in CodePen][Open in CodePen 10]

#### `grid` 第4种 ####

.box { 
        display: grid;
        align-items: center;
    }
    .small { 
        justify-self: center;
    }

[Open in CodePen][Open in CodePen 11]

[Open in CodePen]: https://codepen.io/fxss5201/pen/eQobgb
[Open in CodePen 1]: https://codepen.io/fxss5201/pen/PxgXRJ
[Open in CodePen 2]: https://codepen.io/fxss5201/pen/rQboqX
[Open in CodePen 3]: https://codepen.io/fxss5201/pen/vQMvbZ
[Open in CodePen 4]: https://codepen.io/fxss5201/pen/xQeMwE
[Open in CodePen 5]: https://codepen.io/fxss5201/pen/ZmZweG
[Open in CodePen 6]: https://codepen.io/fxss5201/pen/rQbPJM
[Open in CodePen 7]: https://codepen.io/fxss5201/pen/LXvqBe
[Open in CodePen 8]: https://codepen.io/fxss5201/pen/dQLaxj
[Open in CodePen 9]: https://codepen.io/fxss5201/pen/JeVzdv
[Open in CodePen 10]: https://codepen.io/fxss5201/pen/dQLrOw
[Open in CodePen 11]: https://codepen.io/fxss5201/pen/yQrwMb