flex垂直置中的使用

Posted on Edited on In Views: Disqus:

 

可以做到區塊垂直置中除了使用vertical-align: middle;以外，

還可以使用align-items來決定flexbox內容元素的垂直排列位置，也可做到區塊垂直置中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        .vertical-container {
            display: flex;
            height: 300px;
            align-items: center;
            justify-content: center;
        }

        .border-red {
            border: solid red;
        }

        .border-blue {
            border: solid blue;
        }
    </style>
</head>
<body>
    <div class="vertical-container border-red">
        <div class="border-blue">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
</body>
</html>

 

另一種flex雙欄文字垂直置中的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        .flex-outer {
            display: flex;
        }

        .vertical-container {
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }

        .vertical-container-double {
            flex: 1;
            width: 50%;
        }

        .border-red {
            border: solid red;
        }

        .border-blue {
            border: solid blue;
        }
    </style>
</head>
<body>
    <div class="flex-outer">
        <div class="vertical-container border-red vertical-container-double">
            <div class="border-blue">
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>
        <div class="vertical-container border-red vertical-container-double">
            <div class="border-blue">
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>
    </div>
</body>
</html>

 

參考資料：

flexbox

 

參考資料：

The display declaration

CSS display Property

更多 CSS 達成 Div 垂直置中的方法研究 (CSS Vertical Centering Complete Guide)

CSS Vertical Align(用純CSS解決div垂直置中)