絕對定位使用margin:0 auto居中
先上結論:只要對立方位的屬性值同時存在時即可
position: absolute;
left: 0; /*不一定要0,存在即可*/
right: 0; /*不一定要0,存在即可*/
margin: 0 auto;
width: /*該多少就多少*/
格式化寬度:格式化寬度僅出現在“絕對定位模型中”,也就是出現在position
屬性值為absolute
或fixed
的元素中。對於非替換元素,當left/right
或top/bottom
對立方位的屬性值同時存在時,元素的寬度表現為“格式化寬度”,其寬度大小相對於最近的具有定位特性的祖先元素計算。“格式化寬度”具有完全的流動性,也就是margin
、border
、padding
、content
內容區域同樣會自動分配水平和垂直空間。
上面的內容源自張鑫旭大神的《CSS世界》(強烈推薦的一本書),剛好今天敲程式碼的時候有一個絕對定位居中的需求,回憶起來自己曾經在這本書看過相關內容,就順便記錄一下。
相關文章
- margin:0 auto;不居中
- 絕對定位元素居中
- 絕對定位讓元素居中
- 當層無法運用margin:0 auto居中問題
- text-align:center和margin:0 auto居中的區別
- 絕對定位對margin外邊距的影響
- css絕對定位元素垂直水平居中CSS
- 如何讓絕對定位的元素水平居中
- 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中…….幫你搞定
- 負外邊距margin對於絕對定位元素的影響
- css篇之absolute絕對定位元素居中技巧CSS
- IE CSS Bug系列:IE8中按鈕使用Auto-Margin居中失效CSS
- 盤點8種CSS實現垂直居中水平居中的絕對定位居中技術CSS
- DIV浮動層絕對居中定位用CSS怎麼寫CSS
- CSS絕對定位CSS
- 元素的相對定位與絕對定位
- CSS中的絕對定位與相對定位CSS
- css絕對定位和相對定位的差別CSS
- margin系列之keyword auto
- text-align:center與margin:0px auto的區別
- # CSS 絕對定位釋義CSS
- CSS position:absolute 絕對定位CSS
- CSS position: absolute 絕對定位CSS
- css中絕對定位與相對定位的區別CSS
- 1-相對定位、絕對定位和固定定位的區別
- 外邊距與絕對定位
- 絕對定位實現全屏效果
- 深入理解CSS絕對定位CSS
- css flex佈局中妙用margin: autoCSSFlex
- padding和margin對於position定位的影響padding
- 關於CSS中的定位使用子絕父相(子類絕對位置和父類相對位置)CSS
- 辛星和你徹底搞清CSS中的相對定位和絕對定位CSS
- 你可能不知道的絕對定位
- 定位和居中問題
- 解決CSS垂直居中的幾種方法(基於絕對定位,基於視口單位,Flexbox方法)CSSFlex
- position絕對定位以哪個物件為參考物件
- margin-top影響父元素定位
- 浮動、絕對定位脫離文件流的區別