記錄一下本身經常使用的兩種簡單實現水平垂直居中的方法

時間 2019-11-10

標籤記錄一下本身經常使用兩種簡單實現水平垂直居中方法简体版

原文原文鏈接

display:flex 實現水平垂直居中

經過display:flex實現水平垂直居中主要依賴於justify-content和align-items
justify-content決定了子元素的水平位置,設置justify-content:center便可實現子元素的水平居中
align-items決定了子元素的垂直位置,設置align-items:center便可實現子元素的垂直居中，這裏須要設置元素高度html

.container {
            display: flex;
            height: 100%;
            width: 100%;
            background-color: #f0f0f0;
            justify-content: center;
            align-items: center;
        }

text-align:center和line-height實現水平垂直居中

另外一種簡單實現水平垂直居中的方法就是利用text-align:center實現元素的水平居中，以及經過設置元素的height和line-height相同來實現子元素的垂直居中flex

.runningDuck {
            text-align: center;
            background-color: burlywood;
            height: 200px;
            line-height: 200px;
            width: 200px;
            color:white;
        }

實現效果

代碼

<html>
    <style>
        .container {
            display: flex;
            height: 100%;
            width: 100%;
            background-color: #f0f0f0;
            justify-content: center;
            align-items: center;
        }
        .runningDuck {
            text-align: center;
            background-color: burlywood;
            height: 200px;
            line-height: 200px;
            width: 200px;
            color:white;
        }
    </style>

    <body>
        <div class="container">
            <div class="runningDuck">水平垂直居中元素</div>
        </div>
    </body>
</html>

相關標籤/搜索