1. 定位+margin:auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

2. 定位+margin:负值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }

3. 定位+transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  .father {
      position: relative;
      width: 200px;
      height: 200px;
      background: skyblue;
  }
  .son {
      position: absolute;
      top: 50%;
      left: 50%;
transform: translate(-50%,-50%);
      width: 100px;
      height: 100px;
      background: red;
  }

4. table布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }

5. flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
.father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }

6. grid网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
           display: grid;
           align-items:center;
           justify-content: center;
           width: 200px;
           height: 200px;
           background: skyblue;

       }
       .son {
           width: 10px;
           height: 10px;
           border: 1px solid red
       }

7. 小结

7.1 内联元素居中布局

水平居中：
行内元素设置text-align:center
display:flex;justify-content:center
垂直居中：
单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：display：table-cell；vertical-align：middle

7.2 块级元素居中布局

水平居中：
定宽：margin：0 auto
绝对定位+left：50%+margin：负自身一半
垂直居中：

  • position：absolute设置left，top，margin-left，margin-top(定高)
  • display：table-cell
  • transform：translate(x,y)
  • flex(不定高，不定宽)
  • grid(不定高，不定宽，兼容性较差)