CSS样式之——水平垂直居中

0、 两个盒子，子盒子在父盒子中垂直居中

基本盒子布局
<div class="parent">父盒子
     <div class="child">子盒子</div>
</div>

00、利用子绝父相

(1)利用margin:auto;

.parent{
        position: absolute;
        width: 500px;
        height: 500px;
        background-color: blueviolet;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: aqua;
    }

效果图：
在这里插入图片描述

原理：margin:auto是用来计算元素对应方向应该获得的剩余空间大小

而对子绝父相中的 子元素 进行设置top、right、bottom、left，分别表示距离父元素顶部、右侧、底部、左侧的距离，全设为0之后，margin:auto会自动对上下左右进行计算，得出居中的位置

(2)利用transform属性进行平移

    .parent{
        position: absolute;
        width: 500px;
        height: 500px;
        background-color: blueviolet;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;  
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background-color: aqua;
    }

原理：利用transform的平移属性

对子绝父相子元素设置top，left:50%后，会以子盒子左上角移到父盒子中心，而再用 transform:translate(-50%,-50%);平移自身盒子大小的50%即可达到整个盒子垂直居中，另外transform的其他属性可以自行search

(3)利用margin-top和margin-left配合top和left（适用于已知宽高的子盒子）

    .parent{
        position: absolute;
        width: 500px;
        height: 500px;
        background-color: blueviolet;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;  
        top:50%;
        left:50%;
        margin-top: -50px;
        margin-left: -50px;
        background-color: aqua;
    }

原理：margin-top等可设置元素的上边距，左边距也一样，设置子盒子的负数一半，即可实现居中，其他元素也一样，但是top、left、right、bottom要对应的marigin-xxx

01、利用flex定位

 .parent{
        display: flex;
        width: 500px;
        height: 500px;
        justify-content: center;
        align-items: center;
        background-color: blueviolet;
    }
    .child{
        width: 100px;
        height: 100px;  
        background-color: aqua;
    }

原理：flex定位中，

justify-content决定主轴子元素排列方式

align-items决定交叉轴子元素排列

都设置居中，则整体居中

02、利用display:table-cell;

.parent{
        width: 500px;
        height: 500px;
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        background-color: blueviolet;
    }
    .child{
        display:inline-block;
        width: 100px;
        height: 100px;  
        background-color: aqua;
    }

1、一个盒子，在整个界面居中

参考00(1)、00(3)

效果：