针对单行文本
使用line-height
.wrap{ width: 200px;height: 200px;background: yellow; } .wrap span{ line-height: 200px ;text-align: center; } sasas 针对已知高度的块级元素
相对+绝对+margin-top:-height/2+margin-left:-width:-width/2
针对行内块元素实现处置居中
.wrap{ width: 200px;height: 200px;background: yellow; } .wrap img{ vertical-align:middle;text-align: center; } .wrap .block{ height: 100%;width: 0; } 
![]()
vertical-align:vertical 属性是针对兄弟级别的元素设置的
其中.block也可以使用 img:after或者:before来代替针对父元素和子元素的高度都未知情况下 定位+transform
.wrap{ width: 200px;height: 400px;background: yellow;position: relative; } .wrap div{ position: absolute; top:50%;left: 50%;transform: translate(-50%,-50%);background: red; } sasas
sasas
sasas
sasas
针对父元素和子元素的高度都未知情况下 父：text-align:center+表格布局 子：vertical-align:middle+表格布局
.wrap{ width: 200px;height: 400px;background: yellow;display: table;text-align: center; } .wrap div{ display: table-cell;vertical-align:middle; } sasas
sasas
sasas
sasas
针对父元素高度但是子元素的高度已知都未知情况下 父：相对定位 子：绝对定位+四个属性都为0 +margin:auto
.wrap{ width: 200px;height: 400px;background: yellow; position: relative; } .wrap div{ width:20px;height:100px;position: absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto; background: red; } sasas
sasas
sasas
sasas
使用flex布局
.wrap{ width: 200px;height: 400px;background: yellow; position: relative; display: flex; justify-content: center; flex-direction: column; } .wrap div{ width:20px;top:0;left: 0;right: 0;bottom: 0;margin: auto; background: red; } sasas
sasas
sasas
sasas