都知道的水平垂直居中方式

2021-10-23 12:39:58 字數 1107 閱讀 9838

總結常用的水平、垂直居中方式

(若沒有特殊說明，均以div為例，為方便看到效果，自定義新增樣式)

(假設div寬100px高100px)

div
不足：就是要提前獲得元素的寬高

(假設div寬100px高100px)

div
可能有人會問了，怎麼都是要知道元素的寬高呢！而且還要計算！

請往下看

div
div
假設你要設定class類名為row的div元素垂直居中

="wrap"


>


="row"


>


<


/div>


<


/div>


.wrap


// 自定義樣式


.row


.wrap


// 自定義樣式


.row
注意：如果子元素的塊級元素，則需新增display:inline-block

另外，如果是文字元素，可在其父級新增text-align:center;實現水平居中，再line-height: 高度;實現垂直居中

如：

.div


點讚的最帥了<


/span>


<


/div>執行結果：


CSS水平垂直居中方式
1.grid布局實現 一 father 2.grid布局實現 二 father 3.grid配合margin實現 father son 4.flex布局實現 father 5.flex配合margin實現 father son 6.使用display table cell實現 father son ...


常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...


CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...