CSS水平垂直居中方法總結

部分html**如下：

<

div 
class
="wrap block"
>
<
div 
class
="block-center"
>塊兒居中
div>
div>
<
div 
class
="wrap inline"
>
<
span 
class
="inline-center"
>內聯居中
span
>
div>

一、absolute

二、table

inline 元素

<

div 
class
="table-cell"
>
<
span
>我是文字
span
>
div>

.table-cell

block 元素

<

div 
class
="table-cell"
>
<
div 
class
="block"
>我是塊元素
div>
div>

.table-cell.table-cell .block

三、塊元素自帶方法

四、flex

塊元素和浮動元素

.block.block-center

行內元素（給外層父元素新增即可）

.inline

五、grid

<

div 
class
="wrap grid"
>
<
div 
class
="block"
>grid
div>
div>

.grid.grid .block

對於 grid 的介紹和學習，推薦一篇blog：grid柵格布局

CSS總結水平垂直居中方法

設定塊級元素內文字的水平居中對齊方式，如div p h1 h6等塊級元素標籤 單行文字垂直方向上居中，使其等於height的高度 好好學習天天向上 p p若有多行文字，則新增以下 center 好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上 p div center...

CSS垂直居中水平居中方法

center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...

css垂直水平居中方法

1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...