CSS小技巧收藏

2022-03-20 03:01:45 字數 775 閱讀 3507

很多時候我們需要把乙個元素在其父級容器裡水平、垂直居中對齊。以下我列出了常用的幾種方法：

1.在知道子元素寬度與高度的情況下進行居中，採用位置定位：absolute + margin

.parent 


.child
2.在不知道子元素高與寬的情況下，採用位置定位：absolute + transform

.parent 


.child
3.採用flexbox進行居中對齊

.parent
選擇5-10的子元素

ul li:nth-child(n+5):nth-child(-n+10) 


.thumbnail 




.fullscreen
css**：

.media-wrap 


.media-wrap iframe,


.media-wrap embed,


.media-wrap object
html**：



iframe>


div>

CSS之小技巧

css樣式設計小技巧 水平居中設定 行內元素 如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定 text align center 來實現的。水平居中設定 定寬塊狀元素 當被設定元素為塊狀元素時用 text align center 就不起作用了，這時也分兩種情況 定寬塊狀元素和不定寬...

css之小技巧

css之小技巧 1.margin的計算規則 margin百分比都是相對於容器的寬度計算的，例如 img div 父元素 位於上60px，左60px2.絕對定位元素的百分比margin 例如 img 位於上102.4px，距離祖先元素的距離3.寬度2 1自適應矩形 box box div4.一側定寬的...

css小技巧（一）

box 如 演示 box shadow 00 010px 665,00 020px blue,00 030px red 發生特點 1.塊級元素 不包括浮動元素和絕對定位元素 2.只發生在和當前文件流垂直的方向上 預設情況下文件流是水平的，writing mode可以修改流方向 修復邊距合併問題 1....