水平居中的六種方式

2021-09-25 08:45:49 字數 571 閱讀 8071

用css樣式來讓或者盒子居中顯示

效果圖:

1.通過margin: 0 auto; text-align: center實現css水平居中。

.parent

.child

2.通過display:flex實現css水平居中

.parent

.child

3.通過display:table-cell和margin-left實現css水平居中。

.parent

.child

4.通過position:absolute實現css水平居中。

.parent

.child

5.通過width:fit-content實現css水平居中。

.parent

.child

6.通過display:inline-block和margin:0 auto實現css水平居中。

.parent

.child

六種實現元素水平居中

居中效果在css中很是普通的效果,平時大家所看到的居中效果主要分為三大類 水平居中 垂直居中和水平垂直居中。而其中水平居中相對於後兩者來說要簡單得多。早期總結了一下網際網路上有關於水平垂直居中的幾種實現方案,比如說 css製作水平垂直居中對齊 中介紹了八中實現水平垂直的方案,而在 css製作水平垂直...

div水平垂直居中的六種方法

方法一 絕對定位方法 不確定當前div的寬度和高度,採用 transform translate 50 50 當前div的父級新增相對定位 position relative 如下 div 方法二 絕對定位方法 確定了當前div的寬度,margin值為當前div寬度一半的負值 如下 div 方法三 ...

居中的六種方法

居中效果在css中很是普通的效果,平時大家所看到的居中效果主要分為三大類 水平居中 垂直居中和水平垂直居中。而其中水平居中相對於後兩者來說要簡單得多。早期總結了一下網際網路上有關於水平垂直居中的幾種實現方案,比如說 css製作水平垂直居中對齊 中介紹了八中實現水平垂直的方案,而在 css製作水平垂直...