如何居中 --- Center Position

实现元素水平垂直居中的方式：

利用定位 positon+margin:auto

<style>
    .father{
        position: relative;
    }
    .son{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

利用定位+transform

<style>
    .father {
        position: relative;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

<style>
    .father {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

flex布局

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .son {
        width: 100px;
        height: 100px;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

grid布局

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
        }
        .son {
            width: 10px;
            height: 10px;
        }
</style>
<div class="father">
    <div class="son"></div>

内联元素居中布局 inline-element

水平居中 horizontal

• 行内元素可设置：text-align: center
• flex布局设置父元素：display: flex; justify-content: center

  垂直居中 vertical

• 单行文本父元素确认高度：height === line-height
• 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle