• 网站建设
• 网站制作
• 建站案例
• 解决方案
• 建站资讯
• 关于我们
• 联系小谭

    我是要居中的元素

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

    我是要居中的元素

CSS 代码：

.container {
    position: relative;
    height: 300px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

在这个例子中，我们首先给容器设置了 position: relative，然后为子元素设置 position: absolute，并且把 top 属性设置为 50%。这样子元素就垂直居中了。但是，这个元素的顶部还会有一段多余的空白。为了消除这段空白，我们使用了 transform: translateY(-50%)，将其向上平移了一半的高度，使得元素正好垂直居中。

3. 使用 table-cell

使用 table-cell 等效于将 HTML 元素转换成了表格元素。table-cell 可以实现简单的水平、垂直居中，但是相对来说比较笨重。下面我们来看一下具体实现方法：

HTML 代码：

    我是要居中的元素

CSS 代码：

.container {
    display: table;
    height: 300px;
    width: 100%;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

在这个例子中，我们首先将容器的显示方式设置为 table，然后把容器的高度、宽度设置为我们想要的大小，text-align 设置为 center（使其在水平方向上居中）。接着，我们将子元素的显示方式设置为 table-cell，并通过 vertical-align 属性实现在垂直方向上的居中。

4. 使用 grid 网格布局

CSS Grid Layout 是一个强大的布局方式，它可以让我们迅速而有效地创建网格型布局，包括水平和垂直居中。具体实现方式如下：

HTML 代码：

    我是要居中的元素

CSS 代码：

.container {
    display: grid;
    height: 300px;
    place-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

在这个例子中，我们首先使用 display: grid 将容器的显示方式设置为网格布局。然后，我们使用 place-items 属性，使其在水平和垂直方向上居中。由于这个方法还比较新，在浏览器兼容性方面还不够好。

以上就是“html垂直居中的方法有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。