如何通過CSS使得子控制項相對於父控制項居中?

01-15

題主是來問面試題答案的乎？

絕對定位還可以這樣實現元素的居中，前提是要求該元素的width不為auto。

/* 兼容 IE7+ */ .child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

width: 200px; height: 200px; }

Demo：http://jsbin.com/hewekusi/1/edit

如上說明，這個題目是有問題的，如果只設置子元素的樣式無法達到所描述的效果，父元素必須有一個相對定位的設置：postion: relative;

還有幾種方法：

diaplay: table-cell;
diaplay: flex; /* 推薦 */

方法有很多，在兼容性和擴展性的選擇與權衡上才是更難的，望題主可以靈活運用，而不僅僅只是局限在答題上。

之前做過一次《CSS 居中之美》的分享，僅供參考。

以上

http://codepen.io/shshaw/full/gEiDt

這個居中針對不同類型的子元素可以使用不同方式，具體建議你看看這個完整手冊：網頁元素CSS居中實現完整攻略極客標籤

完全居中：

.Absolute-Center {
margin: auto;
position: absolute; //的元素會變成塊元素，並脫離普通文檔流。而文檔的其餘部分照常渲染，元素像是不在原來的位置一樣
top: 0; left: 0; bottom: 0; right: 0;//
設置了top: 0; left: 0; bottom: 0; right: 0; //樣式的塊元素會讓瀏覽器為它包裹一層新的盒子，因此這個元素會填滿它相對父元素的內部空間，這個相對父元素可以是是body標籤，或者是一個設置了position: relative; 樣式的容器，給元素設置了寬高以後，瀏覽器會阻止元素填滿所有的空間，根據margin: auto; 的要求，重新計算，並包裹一層新的盒子，
既然塊元素是絕對定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會給margin-top和margin-bottom設置一個相等的值
}

跨瀏覽器，兼容性好（無需hack，可兼顧IE8~IE10）

無特殊標記，樣式更精簡

自適應布局，可以使用百分比和最大最小高寬等樣式

居中時不考慮元素的padding值（也不需要使用box-sizing樣式）

布局塊可以自由調節大小

img的圖像也可以使用

注意

必須聲明元素高度

推薦設置overflow:auto;樣式避免元素溢出，顯示不正常的問題

這種方法在Windows Phone上不起作用

margin設為負值

width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; /*left: 50%;*/
/* margin-left: -170px; *//* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */

Table-cell

.img_Div1 li div{

display: table-cell;
height: 200px;/*高度：文字大小=1.14*/
width: 200px;
border: 1px solid gray;
vertical-align: middle;
}
這個通過文字大小控制IE下圖片垂直居中是個很不錯的方法，要比使用position:relative這類高消耗的css方法要好多了。但是這個方法不足之處在於：不支持img外標籤的浮動，所以當多圖片顯示時需要再在外面嵌套一層標籤——資源消耗多了！
高度：文字大小=1.14，這個比例我一直記著，但是後來我將這個比例的概念淡化了，原因在於多次遇到其他比例實現效果的情況。例如上面，就是1:1實現的。
這個方法巧妙的應用了IE默認文字空間的概念，然而這個默認文字空間是看不見，摸不著的，較抽象，不好理解，使用者多記住用法，深層次原因不太理解，不易上手。但是，這裡我要轉折一下，我想到了一種方法，將抽象默認文字空間的概念具體出來，實現了更加容易理解，更加方便使用，更加利於維護的新方法，這就是最後一種方法。

利用background-image position：center

background-repeat:no-repeat; background-position:center background-image:url();

transform法

position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
再給父元素一個相對定位，就可以在父元素中居中，否則在最近父元素（body）中居中

inline-block

.inline_block{border: 1px solid gray;width: 100px ;height: 100px;}
.inline_block a{display: inline-block;vertical-align: middle;font-size:80px}

.inline_block a img{vertical-align: middle;}

span元素的vertical-align：middle

.span_Div img{vertical-align: middle;}
.span_Div span{display:inline-block;height: 100%;vertical-align: middle;line-height: 200px}

本文轉載自桂林網站建設---css各種居中

Margin:0 auto;

大小都不確定的話，那就用table布局

table{width:100%;height:100%;}

td{text-align:center;vertical-align:middle;}

position:absolute;

margin: auto;

left:0;right:0;top:0;bottom:0;