如何用css讓一個容器水平垂直居中

時間 2019-11-19

標籤如何 css 一個容器水平垂直居中欄目 CSS 简体版

原文原文鏈接

直接上代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
        </style>
        
        <div class="div1">
            <div class="div2">
                
            </div>
        </div>
        
    </body>
</html>

問題：如何讓class爲div2的內部容器上下左右居中？css

前來面試的朋友大多數回答都不那麼正確，筆者在這裏給你們作一個詳細的介紹html

1. 咱們可使用margin來達到這個效果面試

1	`.div` `2` `{` `width` `:` `40px` `;` `height` `:` `40px` `;` `background-color` `:` `green` `;` `margin-top` `:` `30px` `;` `margin-left` `:` `30px` `;}`

--------咱們須要將div2的margin-left、margin-top值設置爲父容器寬度的二分之一減去自身寬度的二分之一這裏的父容器是div1算法

它的寬度是100px ； div2的寬度是40px 由此得出 margin-top: 30px; margin-left: 30px; div2也就居中了；效果以下圖瀏覽器

2.利用絕對定位 position：absolute 配合margin的auto屬性來達到居中的效果咱們能夠將css修改成ide

.div1{  width: 100px; height: 100px; border: 1px solid #000000; position: relative;} 
.div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0;}

--------將div2設置爲相對div1的絕對定位，margin設爲四邊auto left、top、bottom、right設爲0 瀏覽器會對絕對定位的容器margin：auto自動識別，post

最後獲得相似於margin：0 auto的效果；spa

而咱們也能夠將left、top、bottom、right設爲你想要的值讓div2能夠在div1中的任意位置，只是定位的原點被margin：auto移動在div2的左上角；例如：3d

.div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: -30px; right: 0; bottom: 0;}

此時div2的位置在垂直居中的-30px的地方；code

總結：在咱們的網頁中，常常會遇到這樣的需求彈窗的居中，圖片的居中，不少童鞋採用js算法動態設置left、top ；而這一步是沒有必要的；

不絕對定位也能夠這樣寫：

.div1{ width: 100px; height: 100px; border: 1px solid #000000; vertical-align:middle;display:table-cell;}
.div2{ width:40px ; margin:0 auto; }
</style>

<div id="div1" class="div1">
<div id="div2" class="div2">
這是一段文字
</div>
</div>

說明

在研究了規範和文檔後，我總結出了「徹底居中」的工做原理：

在普通文檔流裏，margin: auto; 的意思是設置元素的margin-top和margin-bottom爲0。

W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

2. 設置了position: absolute; 的元素會變成塊元素，並脫離普通文檔流。而文檔的其他部分照常渲染，元素像是不在原來的位置同樣。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space

3. 設置了top: 0; left: 0; bottom: 0; right: 0; 樣式的塊元素會讓瀏覽器爲它包裹一層新的盒子，所以這個元素會填滿它相對父元素的內部空間，這個相對父元素能夠是是body標籤，或者是一個設置了 position: relative; 樣式的容器。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

4. 給元素設置了寬高之後，瀏覽器會阻止元素填滿全部的空間，根據margin: auto; 的要求，從新計算，幷包裹一層新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. 既然塊元素是絕對定位的，又脫離了普通文檔流，所以瀏覽器在包裹盒子以前會給margin-top和margin-bottom設置一個相等的值。 W3.org:?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically

使用「徹底居中」，有意遵守了標準margin: auto; 樣式渲染的規定，因此應當在與標準兼容的各類瀏覽器中起做用。