塊級元素水平居中不能用text-align：center 但是有一種錯覺如下
charset="utf-8">
不定寬塊狀元素水平居中title>
.div1
.div2
style>
class="div1">
class="div2">aaadiv>
div1>
body>
html>上述**執行結果如下圖：
1. 看似包含「aaa 」的div也水平居中了，可是這裡有個問題，就是因為兩個div都是不定寬的，text-align使aaa在div2中水平居中了，div2又撐起了div1。所以看上去也達到了水平居中的效果。
2. 此時要是把**中的注釋去掉，也就是給div2 規定乙個寬度，那麼執行結果如下：
3. 可以看到text-aligin 不好使了。
4. 常用的做法是給div1新增樣式：
float
:left; /* 1 */
position
:relative;
left
:50% /* 2 */
position
:relative;
/* 3 */
left
:-50%
1處**作用是使div浮動起來，脫離了流，這樣改變了div1 和div2的塊級元素屬性，
2處**使div1 連同div2 一起針對body元素向右移動50% 注意是整個螢幕的50%，百分比指的是針對上一級元素。這樣兩個div的左邊緣就移動到了body元素的中間位置，因為有**1的作用，這時候兩個div都是被div2的內容撐起，也就是它們的大小會隨著div2內容的改變而改變。
3處的**實現div2相對於div1向左移動50%，這樣就實現了水平居中的效果。如下圖所示
Css之關於塊級元素水平居中
第一種方法 塊級元素如div可以使用margin left auto和margin right auto來實現，但前提是這個塊級元素必須是設定了固定寬度的。對於不能確定寬度的塊級元素就不能這們做了，但是我們可以用table這個標籤來實現。它的寬度由內部的元素決定 撐開 即使不給它設定固定寬度，對它設...
Css之關於塊級元素水平居中
第一種方法 塊級元素如div可以使用margin left auto和margin right auto來實現，但前提是這個塊級元素必須是設定了固定寬度的。對於不能確定寬度的塊級元素就不能這們做了，但是我們可以用table這個標籤來實現。它的寬度由內部的元素決定 撐開 即使不給它設定固定寬度，對它設...
css使寬度不定的div水平居中
我們知道設定了寬度的div等塊級元素居中很簡單，像下面這樣就可以了 css 1 2 3 4 5 6 div 然而，如果div寬度不定的話，如何居中呢？同樣，我們知道行內元素居中也很簡單，只要它的父元素設定了text algin center就可以了。所以，我們可以把寬度不定的div設定成行內元素，然...