纯CSS实现垂直居中的9种方法

以下是“纯CSS实现垂直居中的9种方法”的完整攻略。

什么是垂直居中

当父元素的高度确定,子元素需要在父元素内垂直居中(即竖直方向上居中)时,我们称之为垂直居中。

9种纯CSS实现垂直居中方法

  1. 使用text-alignline-height方法

父元素设置text-align: center;line-height: 父元素高度;,子元素设置display: inline-block; vertical-align: middle;即可实现。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
text-align: center;
line-height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
}

  1. 使用flex布局方法

父元素设置display: flex; justify-content: center; align-items: center;,子元素不用设置,即可实现。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

  1. 使用绝对定位和负边距方法

父元素设置position: relative;,子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);,即可实现。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

  1. 使用绝对定位和margin负值方法

父元素设置position: relative;,子元素设置position: absolute; top: 50%; margin-top: -子元素高度的一半;,即可实现。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -10px;
}

  1. 使用绝对定位和margin:auto方法

父元素设置position: relative;,子元素设置position: absolute; top: 0; bottom: 0; margin:auto;,即可实现。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}

  1. 使用table-cell方法

父元素设置display: table-cell; vertical-align: middle;,子元素不用设置,即可实现。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
display: table-cell;
vertical-align: middle;
}

  1. 使用grid布局方法

父元素设置display: grid; place-items: center;,子元素不用设置,即可实现。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
display: grid;
place-items: center;
}

  1. 使用伪元素方法

父元素设置position: relative;,子元素设置position: absolute; top: 50%; transform: translateY(-50%);,并添加一个::before伪元素,使其占据padding-top的空间即可。

示例代码:

```html

居中文本

```

css
.parent {
height: 200px;
position: relative;
padding-top: 50%;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.child::before {
content: "";
display: block;
height: 0;
}

  1. 使用变量方法

使用CSS变量定义父元素及子元素高度的一半,并分别使用calc函数计算即可。

示例代码:

```html

居中文本

```

css
.parent {
--height: 200px;
height: var(--height);
display: flex;
justify-content: center;
align-items: center;
}
.child {
--height: 20px;
height: calc(var(--height) * 2);
}

以上就是“纯CSS实现垂直居中的9种方法”的完整攻略,可以根据需要选择实现方式。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯CSS实现垂直居中的9种方法 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样

    以下是CSS控制列表和导航制作的攻略,包括水平导航条、垂直翻转的列表、垂直导航栏、内联列表和列表样式的控制。 水平导航条 水平导航条的制作很简单,只需要使用CSS的display属性设为”inline-block”,再设置一些padding、margin以及背景颜色等属性就可以了。示例代码如下: nav { background-color: #333; p…

    css 2023年6月9日
    00
  • Jquery中使用show()与hide()方法动画显示和隐藏图片

    下面是Jquery中使用show()与hide()方法动画显示和隐藏图片的详细攻略: 1. 简介 Jquery是一款前端开发常用的Javascript框架,它封装和简化了Javascript编程的常用功能。其中,show()与hide()是Jquery中常用的方法之一,用来改变元素的可见性是否隐藏。在显示和隐藏图片时,show()和hide()方法都十分实用…

    css 2023年6月10日
    00
  • 使用HTML5 Canvas API控制字体的显示与渲染的方法

    HTML5 Canvas API是一种强大的工具,可以帮助我们控制字体的显示和渲染。下面是使用HTML5 Canvas API控制字体显示和渲染的方法攻略: 1. 在canvas上绘制文本 Canvas可以让我们在画布上绘制文本。以下是绘制文本的基本方法: <canvas id="myCanvas"></canvas&g…

    css 2023年6月11日
    00
  • 使用layui 渲染table数据表格的实例代码

    使用layui来渲染table数据表格,需要以下几个步骤: 引入layui库和相关样式 在标签中引入layui库和相应的样式: <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.all.js…

    css 2023年6月10日
    00
  • 使用css如何制作时间ICON方法实践

    以下是“使用 CSS 如何制作时间 ICON 方法实践”的完整攻略: 使用 CSS 如何制作时间 ICON 在 CSS 中,可以使用伪元素 ::before 和 ::after 来制作 ICON。以下是一些常见的用法。 使用 ::before 和 ::after 伪元素 可以使用 ::before 和 ::after 伪元素来制作 ICON,例如: .tim…

    css 2023年5月18日
    00
  • vue3 可拖动的左右面板分割组件实现

    针对“vue3 可拖动的左右面板分割组件实现”的话题,我将为你提供详细的攻略,包含以下内容: 确定组件需求和功能 搭建基本的组件结构和布局 实现拖动效果 处理拖动边缘限制和动态宽度变化 实现完整功能 下面我们就来一步一步地讲解每个步骤,供你参考。 1. 确定组件需求和功能 我们的目标是创建一个可拖动的左右面板分割组件,使得用户可以自由拖动左右两个面板的宽度,…

    css 2023年6月10日
    00
  • 学习CSS的背景图像属性background

    CSS中的背景图像属性 在CSS中,我们可以使用background属性来设置一个元素的背景。通过设置background属性的不同参数,我们可以对背景进行更精细的控制。其中一个非常重要的参数就是背景图像属性background-image。 背景图像属性background-image的使用方法 通过使用background-image,我们可以指定元素的…

    css 2023年6月9日
    00
  • web容器如何自适应视口大小

    Web 容器自适应视口大小是指 Web 页面中的容器元素能够根据浏览器窗口大小自动调整大小,以适应不同设备的屏幕大小。本文将详细讲解 Web 容器如何自适应视口大小的完整攻略,包括使用 CSS3 媒体查询、使用 JavaScript 等方法。 1. 使用 CSS3 媒体查询 CSS3 媒体查询是一种根据设备特性(如屏幕大小、分辨率、方向等)来应用不同样式的技…

    css 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部