css-flex-center

CSS水平垂直置中的方法

css-flex-center

CSS水平垂直置中的方法

前言:

平常在寫網頁時,總是會遇到水平垂直置中的問題,所以特此紀錄一下使用方式,若有讀者們遇到類似的問題,也可以嘗試看看這個解決方法。

內容:

在使用flex的方式來置中時,切記要給予寬度(width)和高度(height)的值,否則就沒辦法判定中間點的位置了。

使用方式:

.flex-center {
    display: flex;
    align-items: center;    /*垂直置中*/
    justify-content: center;/*水平置中*/
    height: 15vw;
    width: 15vw;
}

範例:水平垂直置中範例展示

<style>
    body {
        height: 100vw;
        width: 100vw;
    }

    h1 {
        font-size: 5vw;
        text-align: center;
    }

    font {
        font-size: 3vw;
    }

    .div-size {
        width: 50vw;
        height: 20vw;
        float: left;
    }

    .large-square {
        height: 10vw;
        width: 10vw;
        background-color: #0094ff;
    }

    .small-square {
        height: 5vw;
        width: 5vw;
        background-color: #00ff90;
    }

    /* 水平置中*/
    .horizontal-center {
        display: flex;
        justify-content: center;
    }

    /*垂直置中*/
    .vertical-center {
        display: flex;
        align-items: center;
    }

    /*水平垂直置中*/
    .horizontal-vertical-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<html>
<head>
    <title>水平垂直置中範例展示</title>
</head>
<body>
    <h1>水平垂直置中範例展示</h1>
    <div class="div-size">
        <div class="horizontal-center">
            <div class="large-square">
                <div class="small-square"></div>
            </div>
        </div>
        <div class="horizontal-center"><font>原始的位置</font></div>
    </div>
    <div class="div-size">
        <div class="horizontal-center">
            <div class="horizontal-center large-square">
                <div class="small-square"></div>
            </div>
        </div>
        <div class="horizontal-center"><font>水平置中的位置</font></div>
    </div>
    <div class="div-size">
        <div class="horizontal-center">
            <div class="vertical-center large-square">
                <div class="small-square"></div>
            </div>
        </div>
        <div class="horizontal-center"><font>垂直置中的位置</font></div>
    </div>
    <div class="div-size">
        <div class="horizontal-center">
            <div class="horizontal-vertical-center large-square">
                <div class="small-square"></div>
            </div>
        </div>
        <div class="horizontal-center"><font>水平垂直置中的位置</font></div>
    </div>
</body>
</html>

結語:

感謝讀者們的閱讀,若有其他問題或有更好的方法,都歡迎提出共同討論,謝謝。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *