div水平居中和垂直居中

Posted 2020-08-20 流火行者

1：使用table和table-cell布局

    <div style="width: 100%;height: 100%;display: table;text-align: center">
        <div style="width: 100%;height: 100%;display: table-cell;vertical-align: middle;">
            <div style="display: inline-block;width: 100px;height: 100px;background: green;">

            </div>
        </div>
    </div>

2：使用flex布局

<style>
    .verticalTop{
        display: flex;
        align-items:flex-start;
        height: 100%;
    }
    .verticalBottom{
        display: flex;
        align-items:flex-end;
        height: 100%;
    }
    .verticalCenter{
        display: flex;
        align-items:center;
        height: 100%;
    }
    .horizaLeft{
        display: flex;
        justify-content:flex-start;
        text-align: left;
        width: 100%;
    }
    .horizaRight{
        display: flex;
        justify-content:flex-end;
        text-align: right;
        width: 100%;
    }
    .horizaCenter{
        display: flex;
        justify-content:center;
        text-align: center;
        width: 100%;
    }
</style>

  <div class="verticalCenter horizaCenter">
        <div style="width: 100px;height: 100px;background: yellow;">

        </div>
    </div>

 

居中效果：