DIV+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;},

博主联系方式:

  • 微信:34419369
  • QQ: 34419369
  • 公众号:前方录
  • 有什么不懂的地方欢迎联系我,帮到你是我会很开心

 

Leave a Reply

邮箱地址不会被公开。 必填项已用*标注