纯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日

相关文章

  • JS溶解形式的文字切换特效

    为了实现JS溶解形式的文字切换特效,我们可以使用以下步骤: 第一步:创建HTML结构 首先我们需要在HTML代码中创建一些必需的结构,包括一个包裹元素、一个用于显示文本内容的元素和若干个用于存放动画效果的元素(可以是span、div或其他包裹元素)。 <div class="wrap"> <h1 id="tex…

    css 2023年6月11日
    00
  • js实现动态改变字体大小代码

    下面我来为您详细讲解如何实现JS动态改变字体大小的代码。 HTML代码 首先,在HTML代码中需要包含一个可操作的按钮或下拉框等控件,来触发字体大小改变的事件,如下所示: <body> <h1>这是一个标题</h1> <p>这是一个段落</p> <button onclick="ch…

    css 2023年6月9日
    00
  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在 Vue 中使用深度选择器(deep selector)可以修改 Element UI 组件的样式。使用深度选择器可以突破组件样式的私有作用域,使得选择器能够深入组件内部,从而修改组件内部的样式。 以下是使用深度选择器的完整攻略: Step 1:使用 /deep/ 或者 >>> 操作符 在 Vue 的模板中,使用 /deep/ 或者 &g…

    css 2023年6月11日
    00
  • Web移动端Fixed布局的解决方案

    Web移动端Fixed布局在移动端中非常常见,其优点在于可以保证在滚动页面时,元素可以固定在页面上的某个位置,提高页面交互性和体验感。但是,Fixed布局也存在一些问题,比如滑动时容易出现卡顿、页面滚动不顺畅等问题。因此,本文将介绍一些在Fixed布局中解决常见问题的方法,以提高页面的流畅性和用户体验。 解决方案一:使用CSS3属性,开启GPU加速 CSS3…

    css 2023年6月11日
    00
  • CSS实例:用CSS制作网页像素画

    关于“CSS实例:用CSS制作网页像素画”的完整攻略,我会进行如下讲解。 CSS实例:用CSS制作网页像素画 实现思路 要用CSS制作网页像素画,我们需要将标准的网页布局尺寸缩小到每个像素点的大小,这样才能够通过CSS样式来控制每个像素点的颜色、显示等效果。 具体来说,我们可以通过以下几个步骤实现像素画: 设置HTML页面的font-size属性为0,隐藏默…

    css 2023年6月10日
    00
  • 教你如何优雅的实现垂直居中(推荐)

    教你如何优雅的实现垂直居中(推荐)攻略 当我们想让一个元素在其父元素中垂直居中时,有多种方式可以实现。本文将介绍一些简单而优雅的方法来实现这一目的。 方法一:使用 Flexbox Flexbox 是 CSS 中实现布局的一种强大工具。可以使用 Flexbox 来实现垂直居中。以下是实现此目的的 HTML 和 CSS 代码示例: <div class=&…

    css 2023年6月10日
    00
  • Bootstrap之所以广泛流传的11大原因

    下面我将详细讲解“Bootstrap之所以广泛流传的11大原因”的攻略。 1. 可靠的工具 Bootstrap是一个强大、稳定的前端框架,并提供了大量的特性和组件。它给开发人员提供了完成项目的工具,并且使用普遍,所以它的可靠性是不可忽略的。让我们看看这个例子: <!DOCTYPE html> <html lang="en&quot…

    css 2023年6月11日
    00
  • javascript设置页面背景色及背景图片的方法

    首先我们来学习如何使用JavaScript设置页面的背景色。 设置背景色 步骤1: 定义HTML文件,我们需要先定义一个HTML文件,例如这里的index.html文件。 <!DOCTYPE html> <html> <head> <title>JavaScript设置页面背景色</title> &…

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