垂直居中是布局中十分常見的效果之一,為實現良好的相容性,pc端實現垂直居中的方法一般是通過絕對定位,table-cell,負邊距等方法。有了css3,針對移動端的垂直居中就更加多樣化。方法1:table-cell
class
="box"
>
>
垂直居中span
>
div>
css:
.box
方法2:display:flex.box
方法3:絕對定位和負邊距.box
.box span
方法4:絕對定位和0.box span
方法5:translate.box span
方法6:display:inline-block.box
.box span
.box:after
方法7:display:flex和margin:auto.box
.box span
方法8:display:-webkit-box.box
寫在結尾 css幾種居中的方法
1 內容居中 style text align center align center 2 元素居中 只適合塊級元素 先設定寬度,再設定margin padding width 200px margin 0px padding 0px 3 垂直居中 適合單獨一行垂直居中 height和line he...
垂直居中的幾種實現方法
用過 fireworks photoshop 的人應該都知道,在畫布中將乙個頁面模組居中是多容易的事,可如果是垂直居中,前端就苦逼了。因為 css 本身並沒有提供相應的 api 支援 確切來說是提供不全 今天重新整理一下思路,說說前端在實現頁面元素垂直居中的幾種思路 利用絕對定位,讓元素的頂部與居中...
垂直居中的幾種實現方法
用過 fireworks photoshop 的人應該都知道,在畫布中將乙個頁面模組居中是多容易的事,可如果是垂直居中,前端就苦逼了。因為 css 本身並沒有提供相應的 api 支援 確切來說是提供不全 今天重新整理一下思路,說說前端在實現頁面元素垂直居中的幾種思路 利用絕對定位,讓元素的頂部與居中...