即display:flex
首先看看html布局
class="wrap">
class="content">div>
div>
.content通常是指需要垂直水平居中的元素
.wrap就是它的父元素
設定父元素display:flex成為乙個彈性盒子
justify-content:center設定其子元素水平居中
align-items:center設定其子元素垂直居中
！！！這裡是align-items不是align-content，
關於彈性盒子的問題下一期詳細講解
css樣式
.wrap
.content
設定其父元素為相對定位display:relative
設定子元素，也就是需要垂直居中的元素display:absolute
設定子元素left:50%,top:50%,這樣子元素的左上角就移動到父元素的中心了
設定子元素margin-left: - 子元素寬度的一半，margin-top: - 子元素高度的一半
注意margin取負數，這樣子元素就實現垂直水平居中了
css
.wrap
.content
設定父元素vertical-align: middle實現內容垂直居中
設定父元素text-align: center實現內容水平居中
下面看看具體的**
.wrap
.content
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...
16種方法實現水平居中垂直居中
熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...