html垂直居中的方法

发布时间：2023-10-16 11:30:31 所属栏目：教程来源：转载

导读： 　　给大家分享一下html垂直居中的方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获

　　给大家分享一下html垂直居中的方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　1. 使用 Flexbox

　　Flexbox（弹性盒子布局）是 CSS3 最新的布局方式之一，是一种使用极其方便的居中方式。Flexbox 的主要思想是，在容器中创建一个弹性伸缩盒子，然后通过控制弹性盒子的属性来实现水平、垂直居中。下面我们来看一下如何使用 Flexbox 实现垂直居中：

　　HTML 代码：

　　<div class="container">

　　    <div class="child">我是要居中的元素</div>

　　</div>

　　CSS 代码：

　　.container {

　　    height: 300px;

　　    display: flex;

　　    justify-content: center;

　　    align-items: center;

　　}

　　.child {

　　    width: 200px;

　　    height: 100px;

　　    background-color: #f8f8f8;

　　}

　　在这个例子中，我们首先为容器设置了一个高度，然后将容器的显示方式设置为 Flexbox，并且使用 justify-content 和 align-items 属性让元素在垂直和水平方向上居中。值得注意的是，这个方法只适用于简单的垂直居中。

　　2. 使用绝对定位

　　绝对定位是一种比较常用的方法。使用绝对定位，可以让一个元素相对于其父元素垂直居中。具体实现方式如下：

　　HTML 代码：

　　<div class="container">

　　    <div class="child">我是要居中的元素</div>

　　</div>

　　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 代码：

　　<div class="container">

　　    <div class="child">我是要居中的元素</div>

　　</div>

　　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 代码：

　　<div class="container">

　　    <div class="child">我是要居中的元素</div>

　　</div>

　　CSS 代码：

　　.container {

　　    display: grid;

　　    height: 300px;

　　    place-items: center;

　　}

　　.child {

　　    width: 200px;

　　    height: 100px;

　　    background-color: #f8f8f8;

　　}

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

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!