实现水平垂直居中的方法总结

1.通过给子元素添加margin

实现水平垂直居中的方法总结
注意:此方法只能用于子元素为块级元素或者行内块元素
······不能用于子元素为行内元素的情况 因为行内元素设置垂直方向的auto没有效果

通过给父级元素设置padding

实现水平垂直居中的方法总结

注意:此方法只能用于子元素为块级元素或者行内块元素
······不能用于子元素为行内元素的情况 因为行内元素无固定宽高

3.text-align: center;于vertical-align: middle;配合使用

实现水平垂直居中的方法总结
给父元素添加text-align: center可以让其内的行内元素行内块元素以及文字水平居中,
给子元素添加vertical-align: middle;让它与文字行高的中线对齐 并且给父元素设置行高等于高度 即可达到子元素垂直居中效果
注意 此方法只能用于子元素为行内块的情况 因为只有行内块元素可以使用vertical-align属性

4.给父元素里面在添加一个行内块元素起到行高的作用

实现水平垂直居中的方法总结
注意 此方法只能用于子元素为行内块的情况 因为只有行内块元素可以使用vertical-align属性