实现水平垂直居中的方法总结
1.通过给子元素添加margin
注意:此方法只能用于子元素为块级元素或者行内块元素
······不能用于子元素为行内元素的情况 因为行内元素设置垂直方向的auto没有效果
通过给父级元素设置padding
注意:此方法只能用于子元素为块级元素或者行内块元素
······不能用于子元素为行内元素的情况 因为行内元素无固定宽高
3.text-align: center;于vertical-align: middle;配合使用
给父元素添加text-align: center可以让其内的行内元素行内块元素以及文字水平居中,
给子元素添加vertical-align: middle;让它与文字行高的中线对齐 并且给父元素设置行高等于高度 即可达到子元素垂直居中效果
注意 此方法只能用于子元素为行内块的情况 因为只有行内块元素可以使用vertical-align属性
4.给父元素里面在添加一个行内块元素起到行高的作用
注意 此方法只能用于子元素为行内块的情况 因为只有行内块元素可以使用vertical-align属性