div居中的问题

Question

給你一個參考網址： http://codepen.io/shshaw/full/gEiDt

Answer 1

帮我看下代码好吗，为什么top:-50%不起作用呢

Answer 2

回答你的問題
你可能忘記了position:relative; 的本質
相對位置必需要有能夠參考的容器
float本身會強制浮動到最左邊
後方的標籤會適性靠著float 的區塊
假如寬度不夠會自動往下方跳
但就因為這個原故 float的top是不固定的
所以你top設50%是無從參考起的float子層的div
既然寬是100px，left就直接-50px
既然高是100px，top就直接-50px
這樣是最穩健的做法

Answer 3

 如你所说 “ float的top是不固定的” 那么显然"float的left也是不固定的"，为什么left:-50%起作用了呢

Answer 4

float 不會超過容器的寬
max-width為100%
但是高度無上限

Answer 5

<div style="width:500px;height:500px;border:1px solid black;position:relative"><div style="width:100px;height:100px;background-color:purple;position:absolute;top:50%;left:50%;margin:-50px -50px;"></div></div>

Answer 6

用过了这办法可行，但是需要知道被居中div的长度和宽度。

Answer 7

不確定的高度的div要居中
可以使用
1.絕對位置
2.外層設display:cell; vertical-align:middle;
3.display:inline-block;   (舊ie版本使用display:inline; zoom:1)
4.display:table我比較推薦用inline-block的做法

Answer 8

 如你所说 “ float的top是不固定的” 那么显然"float的left也是不固定的"，为什么left:-50%起作用了呢你本身就指明 position:relative  依据top left 相对于父元素 定位 ，为什么要用folat 呢?

Answer 9

float不同於定位
是隨著子元素的大小去做浮動
這邊設float只是因為寬度的關係

Answer 10

<!--display:table-cell-->
<div style="width:500px;height:500px;position:relative;border:1px solid #000;display:table-cell;vertical-align:middle;text-align:center;">        
    <div style="display:inline-block;background:purple;padding:10px;">
        不確定高度的內容1<br />
        不確定高度的內容2<br />
    </div>
</div><!--display:table-->
<div style="width:500px;height:500px;position:relative;border:1px solid #000;">        
    <div style="display: table;top: 0;left: 0;right: 0;bottom: 0;margin: auto;overflow: auto;position: absolute;width: 100px;background: purple;padding: 10px;">
        不確定高度的內容1<br />
        不確定高度的內容2<br />
        不確定高度的內容2<br />
        不確定高度的內容2<br />
    </div>
</div><!--display:inline-block;-->
<div style="width:500px;height:500px;position:relative;border:1px solid #000;text-align:center;">        
    <div style="display: inline-block;background:purple;vertical-align:middle;">
        不確定高度的內容1<br />
        不確定高度的內容2<br />
        不確定高度的內容2<br />
        不確定高度的內容2<br />
    </div>
    <span style="display:inline-block;width:0;height:100%;vertical-align:middle;"></span>
</div>

Answer 11

认真看啦，方法1,3类似，通过inline-block令text-align:center 生效;table-cell和100%height的空span令vertical-middle生效，方法2不太了解，在chrome下正常居中，IE8下没有垂直居中，学习了。
thanks a lot!!!!