水平，垂直居中的15種方法

一.水平居中

1.文字水平居中

測試居中

2.盒子居中

是盒子居中

3.多塊級元素水平居中

簡單不先於複雜

而是在複雜之後

簡單不先於複雜，而是在複雜之後。

簡單不先

4.彈性布局，多塊級水平居中

測試1測試2測試2測試2測試2測試2測試2測試2

測試3測試3測試3測試3

display: flex;相容性不好可以這樣解決：最少支援ie10以上

5.垂直居中

1.元素是display:block和display:inline-block都可以使用height:100px ,line-height:100px;

2.利用display:table-cell

3.用flex布局

4.塊級元素固定高度（這個應該是大家最熟悉的，例子就不放了）

.parent .child

5.不知高度

世界上有 10 種人，懂二進位制的和不懂二進位制的。

transform的相容性：

transform: translate(50px,100px);

-ms-transform: translatey(-50%)		/* ie 9 */
-webkit-transform:  translatey(-50%) /* safari and chrome */
-o-transform: translatey(-50%)/* opera */
-moz-transform:  translatey(-50%)； /* firefox */

三，水平居中，垂直居中

1.固定寬高的水平垂直居中（大家熟悉的）

parent

.child

2.不知寬高-水平垂直居中

.parent .child

3.flex布局（上面水居中和垂直居中有例子就不寫了）

.parent

4.利用grid實現水平垂直居中，相容性較差，不推薦。

.parent .child 5.彈窗的水平居中（截圖不好放，就不放了，大家貼上就可以執行）

水平垂直居中了，好開心哦

16種方法實現水平居中垂直居中

1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...

16種方法實現水平居中垂直居中

熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...

水平，垂直居中的15種方法

16種方法實現水平居中垂直居中

16種方法實現水平居中垂直居中

16種方法實現水平居中垂直居中

相關推薦