<div>居中問題總結(jié)

CodeSheep 發(fā)布于2019-08-30 15:53 / 2225人閱讀

摘要：要注意的是只對左右設(shè)置有用，上下沒用，所以不能通過這種方式達(dá)到垂直居中目的。二水平垂直居中方式首先絕對定位，再把都巧妙設(shè)置成，最后設(shè)置為，瀏覽器就自動(dòng)在上下和左右都留下相等的間距，達(dá)到了水平和垂直都居中的目的。

今天看到一道面試題，怎么樣一個(gè)div水平垂直居中，當(dāng)時(shí)想到的就是絕對定位+top和left，卻忘了再通過margin進(jìn)行修正，于是拿出css權(quán)威指南，重新復(fù)習(xí)了下定位的知識，寫個(gè)總結(jié)：

一.水平居中

auto:瀏覽器根據(jù)剩余空間自動(dòng)定位距離，當(dāng)左右都設(shè)置為auto的時(shí)候，保證左右剩余空間相同，就變成了居中。要注意的是：只對左右設(shè)置有用，上下沒用，所以不能通過這種方式達(dá)到垂直居中目的。

二.水平垂直居中

方式1：

首先position絕對定位，再把top right bottom left都巧妙設(shè)置成0，最后設(shè)置margin為auto，瀏覽器就自動(dòng)在div上下和左右都留下相等的間距，達(dá)到了水平和垂直都居中的目的。

方式2：

top和left都是針對div左上角那個(gè)點(diǎn)定位的，所以都設(shè)置了50%，相當(dāng)于把div左上角那個(gè)點(diǎn)定位到了瀏覽器正中間，再通過margin-top和margin-left修正位置。

方式3：

原理與方式二相同，不同點(diǎn)在于利用css3里面的transform屬性進(jìn)行位置的修正

如果還有其他常用的方式，歡迎在文章下面留言補(bǔ)充，謝謝

GPU云服務(wù)器云服務(wù)器 python &lt&gt java &lt=&gt java&lt &gt asp &lt&gt

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116585.html

相關(guān)文章

vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方案

　　想必大家對于vue3.x都很了解，那在vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗時(shí)候如何解決？以下就為大家介紹兩個(gè)常見問題：　　1、在動(dòng)態(tài)加載圖片是空，需要顯示默認(rèn)圖片時(shí)使用v-if失效　　<divclass="swiper-containerhome_swiper"> 　　<divclass="swiper-wrapper"v-...

3403771864 2022-09-08 21:44 評論0 收藏0
vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能

　　在vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能是常用的，下面是具體代碼：　　實(shí)現(xiàn)效果：　　在vue項(xiàng)目中做的一個(gè)截圖功能（只能夠截取圖片），只用鼠標(biāo)就可以在畫面中進(jìn)行框選截取。　　實(shí)現(xiàn)：做一個(gè)彈窗，打開彈窗的時(shí)候傳入要截的圖，接下來在這個(gè)窗口里面，點(diǎn)擊截圖按鈕，開始截圖；點(diǎn)擊取消按鈕，取消截圖。　　窗口里面的html主要是三個(gè)部分，一個(gè)是可截圖區(qū)域，一個(gè)是截取圖片的回顯，一個(gè)是操作按鈕（截圖按鈕和取消...

3403771864 2022-09-12 18:47 評論0 收藏0
CSS Tips------未知寬度高度居中對齊<三種最優(yōu)解決方案>

摘要：前言無論是還是移動(dòng)端開發(fā)我們經(jīng)常會遇到這樣一個(gè)問題父元素內(nèi)包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經(jīng)過實(shí)戰(zhàn)演練及資料搜索感覺以下三種方法是最優(yōu)的解決方案有需要的同學(xué)可以看看相互交流共同學(xué)習(xí)以下三種方案的主題結(jié)構(gòu)如下子元素內(nèi)容布前言無論是pc還是移動(dòng)端開發(fā),我們經(jīng)常會遇到,這樣一個(gè)問題:父元素內(nèi)包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經(jīng)過實(shí)戰(zhàn)演練,...

big_cat 2019-08-29 11:19 評論0 收藏0
CSS Tips------未知寬度高度居中對齊<三種最優(yōu)解決方案>

摘要：前言無論是還是移動(dòng)端開發(fā)我們經(jīng)常會遇到這樣一個(gè)問題父元素內(nèi)包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經(jīng)過實(shí)戰(zhàn)演練及資料搜索感覺以下三種方法是最優(yōu)的解決方案有需要的同學(xué)可以看看相互交流共同學(xué)習(xí)以下三種方案的主題結(jié)構(gòu)如下子元素內(nèi)容布前言無論是pc還是移動(dòng)端開發(fā),我們經(jīng)常會遇到,這樣一個(gè)問題:父元素內(nèi)包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經(jīng)過實(shí)戰(zhàn)演練,...

selfimpr 2019-08-20 11:07 評論0 收藏0