css 不定寬度的塊級元素水平居中
阿新 • • 發佈：2019-02-15
塊級元素水平居中不能用text-align：center 但是有一種錯覺如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.div1{
margin-top: 100px;
border:2px dotted red;
text-align:center
}
.div2{
margin:20px;
border:2px solid blue 上述程式碼執行結果如下圖：
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 */ 給div2新增樣式
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%，這樣就實現了水平居中的效果。如下圖所示
