<!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的內部容器上下左右居中？
前來面試的朋友大多數回答都不那么正確，筆者在這里給大家做一個詳細的介紹
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修改為
.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自動識別，
最后得到類似於margin：0 auto的效果；
而我們也可以將left、top、bottom、right設為你想要的值 讓div2可以在div1中的任意位置，只是定位的原點被margin：auto移動在div2的左上角；例如：
.div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: -30px; right: 0; bottom: 0;}
此時div2的位置在垂直居中的-30px的地方；
總結：在我們的網頁中，經常會遇到這樣的需求 彈窗的居中，圖片的居中，很多童鞋采用js算法動態設置left、top ； 而這一步是沒有必要的；
不絕對定位也可以這樣寫：
<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>
說明
在研究了規范和文檔后，我總結出了“完全居中”的工作原理：
- 在普通文檔流里，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; 樣式渲染的規定，所以應當在與標准兼容的各種瀏覽器中起作用。