垂直居中的幾種簡單方式

2021-10-21 14:02:20 字數 415 閱讀 7393

1 對於單行文字或者內聯元素,可以在父元素使用:

line-height :height 

注意,對於img來說,因為有基線的問題在,所以img除了在父元素加行高外,還有給自身新增:vertical-middle

2 對於塊級元素,可以使用**特性來實現.

html:

css:(利用**屬性設定垂直居中,一定是給父級元素設定)

.fa 

.son

3,對於定位的元素,

父元素:position:relative

子元素:

position: absolute;

top: 50%;

margin-top: -(height/2)px;

css垂直居中的幾種方式

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html class container hi,imooc div css container style 說到豎直居中,css 中有乙個用於豎直居中的屬性 vertical al...

水平垂直居中的幾種方式

本文介紹的方法種類不太全,因為筆者只想分享用過的 通用性高並且簡便易用的。blue yellow element mainer 使用 flex 中 水平軸 和 相對軸 居中的布局方式實現子檔案的水平與垂直居中。css 如下 blue yellow element 關鍵點 父元素使用 relative...

css垂直居中的幾種方式

1.對於可以一行處理的 設定 height apx line height apx 2.對於一段文字 會多行顯示的 2.1如果是可以設定乙個固定高度的 父元素使用display table height apx 子元素使用 display table cell vertical align midd...