CSS水平垂直居中的几种实现方式

1.利用 position:absolute

<div class="father">
     <div class="son">div>
div>

1. 当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半

2. 当元素宽度和高度未知时，可以设置position: absolute和transform: translate(-50%, -50%)

.father{
        position: relative;
        background-color: pink;
        width: 200px;
        height: 200px;
    }
    .son{
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

2. 利用margin:auto

.father{
        position: relative;
        background-color: pink;
        width: 200px;
        height: 200px;
    }
    .son{
        position: absolute;
        background-color: red;
        width: 50px;
        height: 50px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

3. 利用弹性盒子

通过给父元素设置display:flex来实现居中

.father{
        display: flex;
        justify-content: center; //主轴
        align-items: center; //侧轴
        background-color: pink;
        width: 200px;
        height: 200px;
    }
    .son{
        background-color: red;
        width: 50px;
        height: 50px;
    }

4. 利用水平对齐和行高

设置text-align:center和line-height:height实现单行文本水平垂直居中

<div class="father">
     <div class="son">我要居中div>
div>

	.father{
	        background-color: pink;
	        width: 200px;
	        height: 200px;
	        text-align: center;
	}
	.son{
	    line-height: 200px;
	}

5. 最简便的方法

flex+auto
父元素设置flex 子元素margin：auto；

    
"g-container">
        
"g-box">