CSS總結水平垂直居中方法

2021-10-21 16:32:37 字數 1398 閱讀 4167

設定塊級元素內文字的水平居中對齊方式，如div、p、h1~h6等塊級元素標籤

單行文字垂直方向上居中，使其等於height的高度

好好學習天天向上<


/p>


p
若有多行文字，則新增以下**：

="center"


>


好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上好好學習天天向上<


/p>


<


/div>


.center 


.center p
水平居中乙個元素（如

）。元素通過指定寬度，並將兩邊的空外邊距平均分配。如果沒有設定 width 屬性(或者設定 100%)，margin: auto將不起作用。 ​

以下為公共**，為後續的**所用，後面就不再顯示，只會給出相應提示



class


="box1"


>


class


="box2"


>


div>


div>


.box1


.box2
實現垂直水平居中。

絕對定位的百分比是相對於最近已定位父元素的寬高，通過這個特性可以讓子元素的居中顯示，但絕對定位是基於子元素的左上角，期望的效果是子元素的中心居中顯示

為了修正這個問題，可以借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了，所以這個方法**需要知道子元素的寬高。**​

/* 此處引用上面的公共** */


.box1


/* 方法1*/


.box2


/* 方法2：原理同上，借用了css3的calc（）函式 */


.box2


.box2
實現垂直水平居中，不需要知道子元素的寬高。

/* 此處引用上面的公共** */


.box1


.box2
css新增的table屬性，可以讓我們把 普通元素 變為 table元素 的現實效果，通過這個特性也可以實現水平垂直居中。

/* 此處引用上面的公共** */


.box1 


.box2
flex作為現代的布局方案，顛覆了過去的經驗，只需幾行**就可以優雅的做到水平垂直居中。效果圖：（如上圖所示）

/* 此處引用上面的公共** */


.box1

CSS水平垂直居中方法總結

部分html 如下 div class wrap block div class block center 塊兒居中 div div div class wrap inline span class inline center 內聯居中 span div 一 absolute 二 table inl...

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.塊...