admin 管理员组

文章数量: 1087139


2024年3月11日发(作者：download android)

css垂直居中的方法

CSS垂直居中是网页设计中常见的一种布局需求，尤其是对于有特定高度的容器元素，

在其中需要居中一个子元素的情况下，垂直居中就显得尤为重要。本文将介绍CSS中实现

垂直居中的各种方法，包括使用display属性、flex布局、table布局以及绝对定位与负

边距等方式。

一、使用display属性

1. 当容器元素为块级元素时

（1）使用padding属性

当容器元素为块级元素时，可以通过在容器内部添加padding来达到垂直居中的效果，

代码如下：

```

height: 300px;

background-color: #ccc;

padding: 100px 0;

}

.child {

height: 50px;

width: 50px;

background-color: #fff;

margin: 0 auto;

}

```

容器元素的高度需要预设，同时padding属性的上下值需设置成相同的数值，这样子

元素就能够在容器中垂直居中。

（2）使用line-height属性

在容器元素为块级元素时，还可以通过设置line-height属性来实现垂直居中，代码

如下：

```

height: 300px;

background-color: #ccc;

line-height: 300px;

}

.child {

height: 50px;

width: 50px;

background-color: #fff;

margin: 0 auto;

}

```

这种方式需要注意的是，子元素的高度和行高需要相等，而且容器元素的高度也需要

预设。

2. 当容器元素为行内元素时

当容器元素为行内元素时，需要将display属性设置成inline-block或者table-cell

来实现垂直居中，代码如下：

（1）使用inline-block

```

background-color: #ccc;

font-size: 0;

text-align: center;

}

.child {


本文标签： 元素 垂直 居中 容器 需要

版权声明：本文标题：css垂直居中的方法 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1710143706a559381.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。