CSS垂直居中和水平居中

總括：css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。

人生用物，各有天限；夏澇太多，必有秋旱。

水平居中設定：

行內元素 設定 text-align:center；

flex布局 設定display:flex;justify-content:center;(靈活運用)

垂直居中設定：

父元素高度確定的單行文字（內聯元素） 設定 height = line-height；

父元素高度確定的多行文字（內聯元素） a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle； b:先設定 display:table-cell 再設定 vertical-align:middle；

## 塊級元素居中方案

水平居中設定：

定寬塊狀元素 設定 左右 margin 值為 auto；

不定寬塊狀元素 a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定 margin 的值為 auto； b:給該元素設定 display:inine 方法； c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%；

垂直居中設定：

.box

多行文字，此處居中設定

.box

.box span

.box

垂直居中

.box

.box:before
.box:after
.box .content

.box

CSS 垂直居中和水平居中

position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...

CSS 水平居中和垂直居中

1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto，滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...

CSS居中布局（水平居中和垂直居中）

一 水平居中的四種方法 父容器和子容器寬度均不固定 1 inline block text align 子容器 父容器 缺點 不相容ie6 7，子容器內部的內容也會居中 相容辦法 子容器 模擬inline block 2 table margin 子容器 display table使子容器寬度隨著內...