前端水平居中以及垂直居中方法積累

2022-08-01 13:42:13 字數 707 閱讀 6158

1.1已知寬度塊元素寬度 :

.child
1.2文字內容居中:
.parent
1.3通過**:
.child
1.4已知寬度,通過設定position:absolute,margin-left為寬度的負一半
.parent


.child
1.5未知寬度,通過設定position:absolute
.parent


.child
1.6使用flex布局實現（相容性不好，感覺有點變成浮動的效果，不在文件流）
第一種：.parent


第二種：.parent.child
2.1文字垂直居中 .child

2.2vertial-align:middle;

第一種方法：.parent


第二種方法：.parent
2.3未知高度，設定position:absolute
.parent


.child
2.4已知高度，設定position:absolute,margin-top為高度的負一半
.parent


.child
2.5使用flex布局實現
.parent

移動端水平垂直居中 盒子垂直水平居中方案

盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...

CSS垂直居中水平居中方法

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

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

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