公司的一個面試題：如何用css讓一個容器水平垂直居中？

時間 2019-12-01

原文原文鏈接

<!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來達到這個效果面試

.div2{ 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自動識別，spa

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

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

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

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

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

最後謝謝你們；也感謝你們指正

-----------------------------------------很是感謝下面的博友的評論------------------------------------------------

改了一下，這樣能夠實現任意div2高度的,不用絕對定位。
<style type="text/css">
.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>

#27樓 2016-03-08 10:32 | Stealer

#28樓 2016-03-08 10:34 | BZindex

另外貼一個方法二更詳細的介紹

說明

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

在普通文檔流裏，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; 樣式渲染的規定，因此應當在與標準兼容的各類瀏覽器中起做用。

原文章地址：http://codepen.io/shshaw/full/gEiDt