css元素垂直居中的方法

2024年1月28日发(作者：)

css元素垂直居中的方法

CSS 元素垂直居中的方法

一、行内元素垂直居中

1、使用line-height

将元素的line-height设置为元素自身高度，这样文字就垂直居中了，代码如下：

div {

line-height: 20px; /* 元素高度 */

height:20px; /* 元素高度 */

}

2、使用vertical-align

可以将vertical-align属性设置为middle，这样元素就垂直居中了，代码如下：

div {

vertical-align: middle;

}

二、块级元素垂直居中

1、使用margin

将元素的margin设置成负值，需要同时设置top和bottom，使top负值等于bottom的负值，这样元素就垂直居中，代码如下：

div {

width:100px;

- 1 -

height:20px;

margin: -10px auto 0 auto;

}

2、使用position

将元素的position设置为absolute，并且将top和left设置为50%，同时使用transform设置-50%的margin，代码如下：

div {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width:100px;

height:20px;

}

3、使用flex

将元素的display设置为flex，并且设置align-items为center，这样元素就垂直居中了，代码如下：

div {

display: flex;

align-items: center;

width:100px;

height:20px;

- 2 -

}。

- 3 -