實現水平居中和垂直居中的方法

一、水平居中

1. text-align:center(行內元素)

給其父元素設定屬性 text-align:center;

2. margin: 0 auto(塊級元素)

給元素本身設定 margin: 0 auto;

3. 元素的寬度固定

.ele

4.元素的寬度不固定

.ele

二、垂直居中

1. line－height:eleparent-height

單行文字的垂直居中可以設定屬性 line－height:父元素height

2. 元素的高度固定

.ele-parent

.ele

3.元素高度不固定

.ele-parent

.ele

水平居中和垂直居中

行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...

CSS實現水平居中和垂直居中

行內元素 為父元素設定中 text align center 樣式 style text align center 行內元素水平居中span div 定寬塊級元素 定義元素左右margin為auto style width 100px height 100px background color gr...

垂直居中和水平居中總結

container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...