絕對定位使用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世界》(強烈推薦的一本書),剛好今天敲程式碼的時候有一個絕對定位居中的需求,回憶起來自己曾經在這本書看過相關內容,就順便記錄一下。
相關文章
- 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中…….幫你搞定
- css篇之absolute絕對定位元素居中技巧CSS
- css絕對定位和相對定位的差別CSS
- # CSS 絕對定位釋義CSS
- CSS position: absolute 絕對定位CSS
- CSS position:absolute 絕對定位CSS
- css flex佈局中妙用margin: autoCSSFlex
- 1-相對定位、絕對定位和固定定位的區別
- 外邊距與絕對定位
- 關於CSS中的定位使用子絕父相(子類絕對位置和父類相對位置)CSS
- 你可能不知道的絕對定位
- 居中為什麼用transform,而不是margin top/leftORM
- 浮動、絕對定位脫離文件流的區別
- Linux檔案的路徑定位-相對路徑和絕對路徑Linux
- absolute定位css元素居中的兩種方法CSS
- 好程式設計師web前端教程分享web中CSS絕對定位程式設計師Web前端CSS
- css居中對齊大全CSS
- flex:0 flex:1 flex:none flex:auto應該在什麼場景下使用?FlexNone
- Create React app 引用中使用絕對路徑ReactAPP
- 寫一個高度從0到auto的transition動畫動畫
- margin為負值對佈局的影響
- 解決margin塌陷和margin合併
- CSS居中對齊終極指南CSS
- CSS文字水平居中對齊CSS
- webpack的css,less,sass中使用絕對路徑WebCSS
- margin 塌陷
- css marginCSS
- margin和padding使用的場景有哪些?padding
- CSS中的float和margin的混合使用CSS
- 0基礎能成功轉行入 IT嗎?別的不敢說,python絕對是可以的!Python
- 使用FOR XML AUTO控制XML輸出KHXML
- chrome彈窗在雙屏情況下left居中定位異常分析Chrome
- 絕對值邊界法
- 996,絕對不是福氣!996
- CSS Tips——未知寬度高度居中對齊CSS
- 淺談居中問題(水平居中、垂直居中、水平垂直居中)
- CSS position: relative 相對定位CSS
- CSS position:relative 相對定位CSS