HTML/CSS常見的三種水平居中方式

時間 2020-05-21

標籤 html css 常見的三種水平居中方式欄目 HTML 简体版

原文原文鏈接

2019-10-31 15:55:56css

一丶第一種居中方式html

在css中使用text-align和display屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一種居中方式</title>
    <style> .parent{ background: darkgray; text-align: center;
        } .child{ width: 200px; height: 200px; background: darkred; display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果：

　　　　text-align的屬性值通常經常使用的三種：瀏覽器

　　　　　　1.left　　左對齊佈局

　　　　　　2.right　右對齊學習

　　　　　　3.center 居中對齊ui

　　　　這裏將其父div設置對齊方式爲center，若是不給子級div加display屬性時，子級div並不會居中，居中的將會是子級div的文本和父級div的文本，若是要將子級div居中就須要設置其display:inline-block；spa

　　　　display的屬性值通常經常使用的三種：3d

　　　　　　1.inline　　內聯　　　　　　（text-align屬性有效）rest

　　　　　　2.block　　塊級　　　　　　code

　　　　　　3.inline-block 內聯+塊級　　（text-align屬性有效）　

　　　　* 當子級div的display設置成inline屬性時，子級div的寬度和高度將會失效，但div能夠實現居中效果，只是寬度和高度將沒法設置

　　　　* 當子級div的display屬性設置成inline-block屬性時，子級div的寬度和高度有效，通常經常使用這個屬性，若是不給div設置display屬性時，將會默認是block塊級元素

　　　　注意：text-align屬性具備繼承性，也就是說當父級設置了這個屬性時，其全部子級(無論多少層子級標籤)的文本內容將會默認是你所設置的對齊方式，看下面代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一種居中方式</title>
    <style> .parent{ background: darkgray; text-align: center;
        } .child{ width: 200px; height: 200px; background: darkred; display: inline-block;
        } .test{ width: 150px; background: forestgreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            <div class="test">這是居中的文本</div>
        </div>
    </div>
</body>
</html>

　　　　效果：

　　　　這種居中方式的優缺點

　　　　　　優勢：瀏覽器兼容性比較好，由於text-align和inline-block這兩個屬性是CSS2支持的，因此在老版本的瀏覽器中一樣能夠運行

　　　　　　缺點：text-align屬性具備繼承性，使用它將會致使子標籤的文本也是居中的，若是要解決這個問題就須要在其子標籤中從新設置text-align屬性，可是設置後，該標籤的子標籤一樣會繼承上一級的text-align　　　　

　　　　　使用這種居中方式頗有可能會每一個子級標籤從新設置text-align屬性。

二丶第二種居中方式

在CSS中使用display和margin屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第二種居中方式</title>
    <style> .parent{ background: gray;
        } .child{ width: 200px; height: 200px; background: indigo; display: table; margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 父級標籤 -->
    <div class="parent">
        <!-- 子級標籤-->
        <div class="child"></div>
    </div>
</body>
</html>

效果

　　margin屬性時外邊距，共有4個屬性值

　　　　若是設置一個值：上右下左

　　　　若是設置兩個值：上下 - 左右

　　　　若是設置三個值：上 - 左右 - 下

　　　　若是設置四個值：上 - 右 - 下 - 左

　　而這裏能夠不用設置display屬性，一樣也有居中效果，可是設置display屬性時不能設置爲inline屬性值，不然居中一樣會失效。

　　這種居中方式的優缺點

　　　　優勢：只需對子級標籤進行設置就能夠實現居中效果

　　　　缺點：若是子級標籤脫離文檔流，將會致使margin屬性值失效

　　　　　　脫離文檔流的幾個屬性：

　　　　　　　　　　1.float浮動屬性會致使脫離文檔流

　　　　　　　　　　2.position屬性值設置成absolute（絕對定位）

　　　　　　　　　　3.position屬性值設置成fixed的（固定定位）

　　　　　　子級標籤設置了這幾個屬性值時，將會脫離文檔流致使margin屬性值失效

三丶第三種居中方式

在CSS中使用position和transform屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第三種居中方式</title>
    <style> .parent{ width: 500px; height: 200px; position: relative; background: #000;
        } .child{ background: green; width: 200px; height: 200px; position: absolute; left: 50%; transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <!-- 父級標籤 -->
    <div class="parent">
        <!-- 子級標籤 -->
        <div class="child"></div>
    </div>
</body>
</html>