如何设置网页垂直上下居中（网页垂直居中怎么设置）
作者：抖音小助手 浏览量：
时间：2024-05-09 17:20
垂直上下居中是指将一个元素在其容器（一般称为盒子）中上下居中显示，使其在视觉上更加美观、合理。常见于网页设计中的导航栏、主体内容区域等。
二、传统的垂直上下居中方法
在 CSS 中，有多种方法可以实现垂直上下居中。以下介绍传统、常用的几种：
1. 定位 + transform
利用绝对定位将元素相对于父级元素居中，再使用 CSS3 的 transform 属性将其向上移动自身高度的一半。
实现代码如下：
```
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
```
2. 定位 + margin
将元素设置为绝对定位，利用 margin 将其居中。需要注意的是，该方法依赖于已知元素高度的情况下才能实现垂直居中。
实现代码如下：
```
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -元素高度的一半;
}
```
3. Flexbox 布局
Flexbox 布局是 CSS3 中新增的一种弹性盒子布局。利用 flex 属性可以轻松实现盒子内部元素的水平和垂直对齐。
实现代码如下：
```
.parent {
display: flex;
justify-content: center;
align-items: center;
}
```
三、新兴的垂直上下居中方法
除了传统的垂直上下居中方法之外，近年来随着技术的发展，也涌现出了很多新兴的垂直上下居中方法。以下介绍其中几种：
1. Grid 布局
Grid 布局是 CSS3 中新增的一种网格布局。利用 grid 属性可以轻松实现盒子内部元素的水平和垂直对齐。
实现代码如下：
```
.parent {
display: grid;
place-items: center;
}
```
2. calc 函数
calc 函数是 CSS3 中新增的一种计算函数。可用于计算元素的尺寸、长度等数据。该函数可以结合 CSS3 中的 transform 属性实现以视窗高度为基准的垂直居中。
实现代码如下：
```
.parent {
height: 100vh;
}
.child {
height: calc(50% - 元素高度的一半);
transform: translateY(50%);
}
```
3. Flexbox 布局 + margin:auto
利用 Flexbox 布局的 margin:auto 可以实现自适应高度的垂直居中。该方法适用于不知道元素高度的情况下。
实现代码如下：
```
.parent {
display: flex;
}
.child {
margin: auto;
}
```
四、如何选择合适的垂直上下居中方法？
在实际开发中，如何选择合适的垂直上下居中方法是至关重要的。以下是几点需要注意的事项：
1. 是否需要自适应高度？
如果元素的高度是固定的，建议使用定位 + transform 或者定位 + margin 实现垂直上下居中；如果元素的高度是不确定的，建议使用 Flexbox 布局或者 Flexbox 布局 + margin:auto 实现垂直上下居中。
2. 是否基于视窗高度进行垂直居中？
如果需要将元素基于视窗高度进行垂直居中，建议使用 calc 函数或者定位 + transform。
3. 是否需要兼容老浏览器？
如果需要兼容老浏览器，建议使用定位 + margin 或者 table 布局。
在选择垂直上下居中方法时，需要根据实际情况进行综合考虑，并根据需要选择合适的方式。
五、总结
本文介绍了传统和新兴的几种垂直上下居中方法，其中包括定位 + transform、定位 + margin、Flexbox 布局、Grid 布局、calc 函数等。在选择垂直上下居中方法时，需要根据实际情况进行综合考虑，并根据需要选择合适的方式。
在网页设计中，垂直居中是一个很重要的问题。合理的垂直居中布局可以增强网页的可读性和美观度，提高用户的使用体验。对于一些需要对齐的元素，垂直居中可以使页面更加整洁和有序。而对于一些需要突出展示的元素，垂直居中可以增加其视觉冲击力。例如，如果将一个弹窗消息框在垂直方向居中，可以更好地抓住用户的注意力，让用户更容易理解和成功操作。
2. 纯 CSS 实现网页的垂直居中
纯 CSS 是实现网页垂直居中的最常用方式。下面介绍五种利用纯 CSS 实现网页垂直居中的方法。
2.1 利用 flexbox 布局实现
flexbox 布局是 CSS3 新引进的一种布局方式，它可以非常简便地实现常见的网页布局需求。利用 flexbox 布局实现垂直居中，只需要在父容器上设置 display:flex; align-items:center; 就可以了。
具体实现代码如下：
HTML:
```
```
CSS:
```
.parent {
display: flex;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
.child {
margin: 0 auto;
}
```
在上述代码中，我们首先在父容器上设置了 display:flex; 和 align-items:center;，这样子元素就会相对于父容器垂直居中。在子元素上添加 margin:0 auto; 即可实现水平居中。
2.2 利用 transform 属性实现
CSS 的 transform 属性是一个非常有用的属性，它可以实现旋转、平移、缩放等效果。在实现垂直居中时，我们可以利用 transform 属性的 translateY() 方法，移动元素的位置实现垂直居中。具体实现代码如下：
HTML:
```
```
CSS:
```
.container {
height: 300px;
position: relative;
border: 1px solid #ccc;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
```
在上述代码中，我们首先在容器中设置了 height 和 position:relative;，这样子元素就可以绝对定位。在子元素中设置了 position:absolute; 和 top:50%; left:50%;，这样子元素就可以相对于容器中心水平垂直居中。最后，通过 transform: translateY(-50%); 移动子元素位置，实现垂直居中。
2.3 利用 table-cell 属性实现
CSS 的 table-cell 属性可以让元素具有表格单元格的特性，这样就可以使用表格中的特性来实现垂直居中。具体实现代码如下：
HTML:
```
```
CSS:
```
.wrapper {
height: 300px;
display: table;
border: 1px solid #ccc;
}
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}
```
在上述代码中，我们在父容器中设置了 display:table;，使其具有表格的特性。在子元素中使用 display:table-cell;，同时设置 vertical-align:middle; 和 text-align:center;，就可以实现元素的垂直居中。
2.4 利用 line-height 属性实现
CSS 的 line-height 属性可以为元素的行间距设置一个值，当这个值与元素的高度相等时，元素就可以垂直居中。具体实现代码如下：
HTML：
```
```
CSS：
```
.wrapper {
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid #ccc;
}
.box {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
```
在上述代码中，我们在容器中设置了 height 和 line-height 相等，使元素具有相同的高度和行间距。在子元素中使用 display:inline-block;，同时设置 vertical-align:middle; 和 line-height:normal;，就可以实现元素的垂直居中。
2.5 利用 padding 和 margin 实现
在网页设计中，很多时候我们并不知道元素的高度，无法使用 line-height 属性。这时我们可以使用 padding 和 margin 值相同的方式实现元素的垂直居中。具体实现代码如下：
HTML：
```
```
CSS：
```
.wrapper {
height: 300px;
text-align: center;
border: 1px solid #ccc;
}
.box {
height: 300px;
display: inline-block;
vertical-align: middle;
padding-top: 150px;
margin-top: -150px;
}
```
在上述代码中，我们首先在容器中设置了 height，使其具有固定的高度。在子元素中 set height:300px;，同时使用 display:inline-block; 和 vertical-align: middle;，让元素具有行内块元素的属性。接着，设置 padding-top:150px;，让元素顶部空出一定的空间。最后，设置 margin-top:-150px;，让元素上移与 padding 间距相同的距离，实现元素的垂直居中。
3. 结论
垂直居中在网页设计中是一个常见的问题，纯 CSS 是实现垂直居中的最常用方式。利用 flexbox 布局、transform 属性、table-cell 属性、line-height 属性和 padding 和 margin 相等的方法都可以实现元素的垂直居中。根据需求和具体实现方式的难度，我们可以选择合适的方式实现网页的垂直居中。
