幾種居中的方法

2021-10-06 13:55:26 字數 778 閱讀 6445

垂直居中是布局中十分常見的效果之一,為實現良好的相容性,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 支援 確切來說是提供不全 今天重新整理一下思路,說說前端在實現頁面元素垂直居中的幾種思路 利用絕對定位,讓元素的頂部與居中...