資訊專欄INFORMATION COLUMN
摘要：要注意的是只對左右設置有用，上下沒用，所以不能通過這種方式達到垂直居中目的。二水平垂直居中方式首先絕對定位，再把都巧妙設置成，最后設置為，瀏覽器就自動在上下和左右都留下相等的間距，達到了水平和垂直都居中的目的。
今天看到一道面試題，怎么樣一個div水平垂直居中，當時想到的就是絕對定位+top和left，卻忘了再通過margin進行修正，于是拿出css權威指南，重新復習了下定位的知識，寫個總結：
一.水平居中
auto:瀏覽器根據剩余空間自動定位距離，當左右都設置為auto的時候，保證左右剩余空間相同，就變成了居中。要注意的是：只對左右設置有用，上下沒用，所以不能通過這種方式達到垂直居中目的。
二.水平垂直居中
方式1：
首先position絕對定位，再把top right bottom left都巧妙設置成0，最后設置margin為auto，瀏覽器就自動在div上下和左右都留下相等的間距，達到了水平和垂直都居中的目的。
方式2：
top和left都是針對div左上角那個點定位的，所以都設置了50%，相當于把div左上角那個點定位到了瀏覽器正中間，再通過margin-top和margin-left修正位置。
方式3：
原理與方式二相同，不同點在于利用css3里面的transform屬性進行位置的修正
如果還有其他常用的方式，歡迎在文章下面留言補充，謝謝
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116585.html
想必大家對于vue3.x都很了解，那在vue3.x使用swiperUI動態加載圖片失敗時候如何解決？以下就為大家介紹兩個常見問題： 1、在動態加載圖片是空，需要顯示默認圖片時使用v-if失效 <divclass="swiper-containerhome_swiper"> <divclass="swiper-wrapper"v-...
在vue項目中canvas實現截圖功能是常用的，下面是具體代碼： 實現效果： 在vue項目中做的一個截圖功能（只能夠截取圖片），只用鼠標就可以在畫面中進行框選截取。 實現：做一個彈窗，打開彈窗的時候傳入要截的圖，接下來在這個窗口里面，點擊截圖按鈕，開始截圖；點擊取消按鈕，取消截圖。 窗口里面的html主要是三個部分，一個是可截圖區域，一個是截取圖片的回顯，一個是操作按鈕（截圖按鈕和取消...
摘要：前言無論是還是移動端開發我們經常會遇到這樣一個問題父元素內包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經過實戰演練及資料搜索感覺以下三種方法是最優的解決方案有需要的同學可以看看相互交流共同學習以下三種方案的主題結構如下子元素內容布 前言 無論是pc還是移動端開發,我們經常會遇到,這樣一個問題:父元素內包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經過實戰演練,...
摘要：前言無論是還是移動端開發我們經常會遇到這樣一個問題父元素內包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經過實戰演練及資料搜索感覺以下三種方法是最優的解決方案有需要的同學可以看看相互交流共同學習以下三種方案的主題結構如下子元素內容布 前言 無論是pc還是移動端開發,我們經常會遇到,這樣一個問題:父元素內包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經過實戰演練,...
閱讀 992·2021-11-04 16:08
閱讀 2966·2021-09-13 10:37
閱讀 504·2019-08-30 15:56
閱讀 1952·2019-08-30 15:55
閱讀 2235·2019-08-30 15:53
閱讀 2078·2019-08-30 13:13
閱讀 2918·2019-08-30 12:51
閱讀 1539·2019-08-29 16:06
