css垂直水平居中方法

2021-08-07 09:47:36 字數 582 閱讀 2666

1. 塊級元素中的行內元素水平居中: 給塊級元素設定:`text-align:center;`

2. 塊級元素1中的塊級元素2水平居中:(1)給塊級元素2設定:`margin:0 auto;` (2)給塊級元素2設定:`display:inline-block;`給塊級元素1中設定:`text-align:center;`1. 塊級元素中的行內元素垂直居中(父元素高度確定): (1)給塊級元素設定:`line-height;` (2)chrome,firefox,ie8以上瀏覽器的話,給塊級元素設定:`display:table-cell;vertical-align:middle;`

2. 塊級元素1中的塊級元素2垂直居中(父元素高度確定): (1)在塊級元素1中設定:`line-height;`,塊級元素2中設定:`display:inline-block;vertical-align:middle;`(但是塊級元素2中的文件內容會脫離塊級元素2) (2)chrome,firefox,ie8以上瀏覽器的話,給塊級元素設定:`display:table-cell;vertical-align:middle;`

3. 若父元素沒有高度,給父元素設定:`padding:100px 0;`

CSS垂直居中水平居中方法

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

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總結水平垂直居中方法

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