(一)文本节点元素垂直居中:在其块状父元素上写如下样式行高=高度,适用于一行文本:{line-height:xx; height: xx};
(二)图像元素垂直居中:父级元素高度要大于图像高度,并设置好该高度,且行高要等于该高度,{line-height:xx; height: xx};在其图片元素img写如下样式:{vertical-align: middle;};
(三)背景图像垂直居中方法:设置背影图片的元素高度要大于图片高度,{background-position:center center};
二、块级元素垂直居中;
(四)div元素垂直居中:
1.父元素写{position:relative;确定高度}
2.自身元素,要确定高度,高度要小于父级高度,写{position:absolute;top:50%;margin-top:负的自身宽度的1/2;}
(五)div元素垂直居中:
1.父元素写{position:relative;确定高度}
2.自身元素,不需要确定高度,但高度要小于父级高度,写{position:absolute;top:50%;transform: translateY(-50%);}
(六)div元素垂直居中:
1.父元素写{display: flex;align-items: center; 确定高度}
2.自身元素,要确定高度,高度要小于父级高度,写{height: xx;}
(七)div元素垂直居中:
1.父元素写{display: flex;align-items: center; 确定高度},父级高度减去子级高度,再除以2,得出来的数值,设置父元素上下内边距为该值。
2.自身元素,要确定高度,高度要小于父级高度,写{height: xx;},
博主联系方式:
- 微信:34419369
- QQ: 34419369
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心