居中方案水平居中行內元素父元素設置text align:center定寬塊元素設置 margin 左右為 auto塊元素文本居中設置text align:center不定寬塊元素設置 display 為 table，margin 左右為 auto利用table標簽的長度自適應性 即不定義其長度也不默 ...
居中方案
- 水平居中
- 行內元素
- 父元素設置text-align:center
- 定寬塊元素
- 設置 margin 左右為 auto
- 塊元素文本居中設置text-align:center
- 不定寬塊元素
- 設置 display 為 table，margin 左右為 auto
利用table標簽的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。 - 設置 display 為 inline 或 inline-block，按行內元素居中處理
- 給父元素設置float:left position:relative 和 left:50%，且：
float隱性改成了display:inline-block使得div獲得寬度自適應特性（這是關鍵），本質是觸發了BFC。所以換成 display:inline-block 或 display:flex也可以。或者不要float:left position:relative ，直接寫成position:absolute等。- 子元素設置 position:relative 和 left: -50% 來實現水平居中，會溢出父元素盒模型
- 或者使用css3的transform: translateX(-50%)，效果一樣，會溢出父元素盒模型
- 子元素還可以用 margin-left：-50% 來居中，但是這樣會使子元素寬度變為實際寬度的1.5倍
- 設置 display 為 table，margin 左右為 auto
- 行內元素
- 垂直居中
- 父元素高度確定的單行文本
- 設置父元素的 height 和 line-height 高度一致。
line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”。
- 設置父元素的 height 和 line-height 高度一致。
- 父元素高度確定的多行文本
- 設置父元素 display:table
- 用一個元素包裹多行標簽元素，設置 display:table-cell 和 vertical-align:middle
- 父子元素高度未知
- 設置父元素 position:relative
- 設置子元素 position: absolute top: 50% transform: translateY(-50%)
- 父元素高度確定的單行文本
- flex(不相容IE)
- 父元素設置
- display:flex;/*Flex佈局*/
- display: -webkit-flex; /* Safari */
- 附：隱性改變display類型
- 元素（不論之前是什麼類型元素，display:none 除外）
- 設置以下 2 個句之一：
- position : absolute
- float : left 或 float:right
- 元素的display顯示類型就會自動變為以 display:inline-block 的方式顯示，當然就可以設置元素的 width 和 height 了，且預設寬度不占滿父元素。
