CSS詳解水平和垂直居中

2021-09-11 16:17:48 字數 927 閱讀 3978

text-align: center;
margin: 0 auto;
設定父元素flex布局

display: flex;


justify-content: center;
1.子元素使用相同內邊距撐開父元素

padding-top: 30px;


padding-bottom: 30px;
2.使高度和行高相等（字元本來就在行高內垂直居中了，只是行高與文字的盒子高度不等，導致不能在盒子裡垂直居中）

height: 100px;


line-height: 100px;
3.使用vertical-align

vertical-align: middle;
4.設定父元素flex布局

.parent
1.塊級元素高度已知，使用子絕父相，上外邊距為負高度的一半

.parent 


.child
2.塊級元素高度未知，使用子絕父相和transform

.parent 


.child
3.使用flex布局

.parent
1.寬度高度已知

.parent 


.child
2.寬度高度未知

.parent 


.child
3.使用flex布局

.parent
4.使用gri布局，這裡不闡述

CSS水平和垂直居中

parent.son.parent son.parent1 transform 絕對定位，left50 向左平移 50 son2 margin left 絕對定位，left50 margin left 0.5 子元素寬度 注 此方法必須知道子元素寬度 son3 left right 0 son.pa...

css中的居中（水平和垂直）

text align center 水平居中，寫在父類元素中，作用於子類行內元素，讓其在父類元素中水平居中，如果子類元素是塊元素，也想水平居中，可加display inline block vertical align center 這個樣式屬性只能寫在讓子類行內元素中，父類也要是行內元素，作用就是...

CSS水平和垂直居中技術

行內元素的水平居中 text align center 在父元素中設定 塊級元素的水平居中 margin 0 auto 行內元素的垂直居中 line height 父元素的高度 在父元素中設定 vertical align middle 用於垂直對齊inline元素 例如將乙個icon與文字對齊。浮...