首页  >  css3  >  关于css垂直居中的问题

（一）文本节点元素垂直居中：在其块状父元素上写如下样式行高=高度，适用于一行文本：{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；}，