天天看點

如何在 CSS 中設定元件在浏覽器螢幕水準垂直居中

如何在 CSS 中設定元件在浏覽器螢幕水準垂直居中

  在 CSS 中設定元件在浏覽器螢幕水準垂直居中可分解為兩個問題,一是設定元件在其父元件的水準垂直居中,二是讓其父元件鋪滿整個螢幕。

  對于讓最外層元件鋪滿整個螢幕,這需要将其寬高均設定為

100%

。不過這樣做了會導緻浏覽器出現水準和垂直的滑條。這是因為元素 body 會預設有一定的邊距 margin,一般為

8px

,是以同時還要将元素 body 的邊距 margin 設為 0。

  對于讓元件在父元件中水準垂直居中,方法有很多,這裡選擇 flex 布局。直接在父元件中設定 flex 布局和水準垂直居中即可。(注意:使用 flex 布局這種方法是在父元件中進行設定。)

示例代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            /* 去掉邊距,這裡為了去除鋪滿螢幕後浏覽器橫豎兩邊的滑條 */
            margin: 0;
        }

        #outermost {
            /* 下面 3 行代碼設定塗滿整個螢幕 */
            height: 100%;
            width: 100%;
            position: absolute;

            /* 下面 3 行代碼設定子元素橫豎均居中 */
            display: flex;
            /*display: -webkit-flex;*/
            /* 設定水準居中 */
            justify-content: center;
            /* 設定垂直居中 */
            align-items: center;

            background: #00ff0d;
        }

        .item {
            width: 50px;
            height: 40px;
            border: 1px solid #00c1b1;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="outermost">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
</body>
</html>
           

運作效果圖:

如何在 CSS 中設定元件在浏覽器螢幕水準垂直居中

繼續閱讀