9種水平垂直居中的方法：
可以直接複製**去體驗一下。已引入了vue元件和elementui元件
width: 100%;
margin: 50px auto;
/* 設定柵格布局 ， auto-fill 關鍵字，表示每列寬度300px,然後自動填充,直到容器不能放置更多的列*/
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
} .section
.items
/* 方法一:
絕對定位方法：不確定當前div的寬度和高度，採用 transform: translate(-50%,-50%);
當前div的父級新增相對定位（position: relative;） */
.section-one
.items-one
/* 方法二:
絕對定位方法:確定當前div的寬度和高度,採用margin值為當前div寬度高度一半的負值 */
.section-two
.items-two
/* 方法三:
絕對定位方法:絕對定位下top left right bottom 都設定0 ,magin:auto;*/
.section-three
.items-three
/* 方法四:
flex布局:父元素新增flex樣式 ,父元素的寬高要設定*/
.section-four
.items-four
/* 方法五:
table-cell實現文字內容水平垂直居中 , 設定好之後margin屬性失效 */
.section-five
.items-five
/* 方法六 ：
父元素設定:grid柵格布局,子元素 align-self: center; justify-self: center; 居中展示 */
.section-six
.items-six
/* 方法七
父元素設定:grid柵格布局,align-content: center;justify-content: center; 居中展示*/
.section-seven
.items-seven
/* 方法八：
父元素設定:flex布局,子元素上使用：margin:auto; 居中展示*/
.section-eight
.items-eight
/* 方法九：
父元素設定:flex布局,子元素上使用：margin:auto; 居中展示*/
.section-nine
.items-nine
/* 柵格布局小方塊 */
.section-ten
.grid-item
.grid-item:nth-child(2n)23
4678
9123
4567
89
16種水平居中垂直居中方法
1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...
水平，垂直居中的15種方法
一.水平居中 1.文字水平居中 測試居中 2.盒子居中 是盒子居中 3.多塊級元素水平居中 簡單不先於複雜 而是在複雜之後 簡單不先於複雜，而是在複雜之後。簡單不先 4.彈性布局，多塊級水平居中 測試1測試2測試2測試2測試2測試2測試2測試2 測試3測試3測試3測試3 display flex 相...
16種方法實現水平居中垂直居中
1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...