置中篇 - 範例

這篇主要簡單帶過幾種置中的方式:

範例1、Display - Flex

    <div class="main">
        <div class="box"></div>
    </div>

範例2、Display - Grid

    <div class="main">
        <div class="box"></div>
    </div>

範例2-1

    <div class="main">
        <div class="box"></div>
    </div>

範例2-2

    <div class="main">
        <div class="box"></div>
    </div>

範例3position -relative

    <div class="wrap">
        <div class="box"></div>
    </div>

範例3-1

    <div class="wrap">
        <div class="box"></div>
    </div>

範例3-2

    <div class="main">
        <div class="box"></div>
    </div>

Last updated