使元素相對於窗口或父元素水平垂直居中的幾種方法

時間 2020-08-11

標籤元素相對於窗口水平垂直居中幾種方法简体版

原文原文鏈接

若是一個元素具備固定或相對大小，要使其無論如何調整窗口大小或滾動頁面，始終位於瀏覽器窗口中間，可以使用以下方法：html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .window-center {
            /* 將position設置爲fixed，使元素相對於瀏覽器窗口定位 */
            position: fixed;
            /* 將margin設置爲auto，使瀏覽器自動推算元素外邊距 */
            margin: auto;
            /* 將上下左右邊距（相對於瀏覽器窗口邊緣）全設爲0，使瀏覽器推算出的外邊距上下、左右對應相等
               能夠設置任何其餘相等的值，但若是窗口小到不能容下任意一個方向的兩側邊距，元素也將不居中，因此推薦設爲0 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        div {
            /* 使用這種方法的元素必須有絕對或相對大小，不然瀏覽器推算出的margin將爲0，元素將被拉伸，以適應窗口大小和四個邊距值 */
            width: 30%;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="window-center"></div>
</body>
</html>

效果如圖：瀏覽器

那如何讓一個元素相對於其父元素水平垂直居中呢？首先，要把元素的position屬性值改成absolute，使其有可能相對於父元素定位，而不是相對於瀏覽器窗口定位。absolute指定元素相對於position值不爲static的第一個祖先元素定位（若是找不到這樣的祖先元素，就相對於body），而static是元素position屬性的默認值，因此咱們還要在父元素上作手腳。除了默認值static，position屬性主要的值還有absolute、fixed和relative。因爲大多數時候，咱們不想爲了子元素的居中而改變父元素的位置或定位方式，因此排除absolute和fixed（固然這兩個值並不影響子元素的居中）。只剩下relative了，它指定元素相對於static定位方式肯定的位置定位（使用left、right、top和bottom屬性）。若是將父元素的position屬性設爲relative，但不改變定位屬性（left、top等），那麼就達到了既讓子元素相對於其定位，又不改變其默認佈局方式的效果。舉例以下：佈局

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .parent-center {
            /* 將position設置爲absolute，使元素有可能相對於瀏覽器窗口定位 */
            position: absolute;
            /* 將margin設置爲auto，使瀏覽器自動推算元素外邊距 */
            margin: auto;
            /* 將上下左右邊距（相對於父元素邊緣）全設爲0，使瀏覽器推算出的外邊距上下、左右對應相等
               能夠設置任何其餘相等的值，但若是父元素小到不能容下任意一個方向的兩側邊距，元素也將不居中，因此推薦設爲0 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        div.parent {
            position: relative;
            /* 父元素能夠有絕對或相對大小，也能夠僅由其內容決定其大小 */
            width: 50%;
            height: 200px;
            background-color: aquamarine;
        }

        div.child {
            /* 使用這種方法的元素必須有絕對或相對大小，不然瀏覽器推算出的margin將爲0，元素將被拉伸，以適應父元素大小和四個邊距值 */
            width: 30%;
            height: 100px;
            background-color: antiquewhite;
        }

        /* 這是一個用於演示父元素的默認定位未被影響，而且子元素確實是相對於父元素居中的干擾元素 */
        #commonDiv {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div id="commonDiv"></div>
    <div class="parent">
        <div class="parent-center child"></div>
    </div>
</body>
</html>

效果如圖：flex

此外，還能夠經過爲父元素啓用彈性盒佈局解決子元素水平垂直居中的問題：ui

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        div.parent {
            /* 啓用彈性盒佈局 */
            display: flex;
            /* 使子元素水平居中 */
            justify-content: center;
            /* 使子元素垂直居中 */
            align-items: center;
            width: 50%;
            height: 200px;
            background-color: aquamarine;
        }

        div.child {
            width: 30%;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果如圖：spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。