css的居中分為水平居中和垂直居中
水平居中又分為內聯元素居中和塊級元素居中，塊級元素又分為定寬的塊級元素居中和不定寬的塊級元素居中
1.內聯元素水平居中
利用text-align: center
可以實現在塊級元素內部的內聯元素水平居中
.center-text2.固定寬度的塊級元素margin-left 和margin-right 設定成auto，就可以使塊級元素水平居中
.center-block3.多塊級元素水平居中
3.1 利用inline-block
通過設定塊級元素顯示型別為inline-block，父容器的text-align屬性使的多塊級元素水平居中
.container.inline-block3.2 利用display:flex
利用彈性布局，實現水平居中，其實justify-content用於設定彈性盒子元素在橫軸方向上的對齊方式
.flex-center3.3 利用position:relative 和left:50%
父元素垂直居中.container子元素
.child
1.單行文字垂直居中：利用line-height即可實現。
style2.table方式居中
<}#celldiv
id>
<
div
id="cell"
>
<
div
class
="content"
>content goes here
div>
div>
div>
3. position:absoulte, 和水平居中那個有點類似，div需要有高度
<div
class
="content"
> content goes here
div>
#content4.flex布局
核心**這種方式，首先給父元素設定display:flex，設定好後改變主軸的方向flex-direction:colum; justify-content:center是對齊方式display: flex;
flex-direction: column;
justify-content: center;
flex-direction的引數：總結：這兩篇布局和對齊的博文我寫了兩天，參考了很多的網上資料，也看了很多部落格，做了一些實驗。實話說，學完以後，是清晰了很多，但以我現在的css功力，也還是不能完全理解和搞得清清楚楚。row（該值為預設值）：主軸為水平方向，起點在左端；
row-reverse：主軸為水平方向，起點在右端；
column：主軸為垂直方向，起點在上沿；
column-reverse：主軸為垂直方向，起點在下沿。
justify-content屬性定義了專案在主軸上的對齊方式，可能的取值有五個，分別如下（不過具體的對齊方式與主軸的方向有關，以下的值都是假設主軸為從左到右的）：
flex-start（該值是預設值）：左對齊；
flex-end
：右對齊；
center：居中對齊；
space-between：兩端對齊，各個專案之間的間隔均相等；
space-around：各個專案兩側的間隔相等。
需要後面在不斷的實驗中去參透和領悟，也會慢慢的修改和完善這些內容。
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...