CSS中实现元素水平垂直居中的方式有哪些

在CSS中实现元素水平垂直居中的方法有很多,以下是一些常见的方法:

1. 使用Flexbox

Flexbox是一个现代的布局模型,可以轻松实现元素的水平垂直居中。

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 视口高度 */
}

2. 使用Grid

CSS Grid是另一种强大的布局系统,也可以用来实现元素的水平垂直居中。

.container {display: grid;height: 100vh; /* 视口高度 */
}
.container > div {align-self: center; /* 垂直居中 */justify-self: center; /* 水平居中 */
}

3. 使用绝对定位和transform

通过将元素的定位设置为绝对定位,并使用transform属性来调整位置。

.container {position: relative;height: 100vh; /* 视口高度 */
}
.centered-element {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

4. 使用表格布局

通过将元素的display属性设置为table-cell,并使用vertical-align和text-align来实现居中。

.container {display: table-cell;text-align: center; /* 水平居中 */vertical-align: middle; /* 垂直居中 */height: 100vh; /* 视口高度 */
}
.centered-element {display: inline-block; /* 或者 display: table-cell; */
}

5. 使用line-height

这种方法适用于单行文本的垂直居中。

.container {line-height: 100vh; /* 视口高度 */text-align: center; /* 水平居中 */
}

6. 使用calc()函数

结合使用绝对定位和calc()函数来计算居中的位置。

.container {position: relative;height: 100vh; /* 视口高度 */
}
.centered-element {position: absolute;top: calc(50% - (elementHeight / 2));left: calc(50% - (elementWidth / 2));
}

7. 使用伪元素

通过在父元素上使用伪元素来创建一个占位符,然后通过设置margin来实现居中。

.container {position: relative;height: 100vh; /* 视口高度 */
}
.container::before {content: "";display: inline-block;height: 100%;vertical-align: middle;
}
.centered-element {display: inline-block;vertical-align: middle;margin: 0 auto; /* 水平居中 */
}

每种方法都有其适用的场景,选择哪种方法取决于具体的需求和兼容性要求。在现代浏览器中,Flexbox和Grid通常是最简单和最强大的解决方案。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/34508.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++在VS2022开发Windows窗口程序2:API式的Windows窗口程序设计模式

函数API式的Windows GUI程序设计模式是一种基于Windows API函数的方式来设计和开发Windows图形用户界面(GUI)应用程序的模式。在这种模式下,开发者通过调用Windows API函数来创建窗口、处理消息、绘制图形等,而不依赖于特定的GUI库…

mass storage:RAID Structure , Error Detection and Correction

RAID Structure RAID – redundant array of inexpensive disks multiple disk drives provides reliability via redundancyIncreases the mean time to failureMean time to repair – exposure time when another failure could cause data lossMean time to data loss bas…

【TB作品】stm32单片机,红外遥控器,温控风扇,模拟空调,PWM风扇

空调机 硬件:stm32、oled显示器、ds18b20温度传感器、风扇驱动和风扇、红外接收器、遥控器 软件功能: (1)显示室内温度 (2)显示当前模式:常态、除湿、通风 (3)显示当前风…

Ubuntu Apache2 搭建Gerrit 环境

一、前言 时隔多年,好久没有更新CSDN 博客了,主要原因有如下两点: 1、平时工作繁忙,无暇更新。 2、工作内容涉及信息安全,一些工作经验积累不便更新到互联网上。 最近一直在折腾搭建Gerrit 环境,最开始…

win11安装VMware虚拟机,启动系统后蓝屏,安装虚拟机卡在虚拟网卡界面的解决办法

机缘和遇到的问题 由于最近618换了台新笔记本电脑,然后系统自带的操作系统是windows 11 家庭版本,由于工作需要用到window10的环境,不得不安装一个虚拟机来解决问题,然后就把这次安装VMware虚拟机遇到的坑给大家分享一下&#xf…

研二自学嵌入式开发,就业导向,学习路线该如何规划?

研二才来问这个问题,有点晚,离你开始找工作还有大概8~9个月,你应该用应试思维来应对找工作这个事,尤其当前这个经济形势下。 刚好我有一些资料,是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入…

基于Openmv的追小球的云台

介绍 在这篇文章,我会先介绍需要用到且需要注意的函数,之后再给出整体代码 在追小球的云台中,比较重要的部分就是云台(实质上就是舵机)的控制以及对识别的色块位置进行处理得到相应信息后控制云台进行运动 1、舵机模…

asp.net core反向代理

新建项目 新建空白的asp.net core web项目 安装Yarp.ReverseProxy包版本为2.2.0-preview.1.24266.1 编写代码 namespace YarpStu01;public class Program {public static void Main(string[] args){var builder WebApplication.CreateBuilder(args);builder.Services.AddRev…

JavaWeb——MySQL:DQL

3. DQL:查询 查询是使用最多、最频繁的操作,因为前面的修改以及删除,一般会交给数据库专业的人员,对于非数据库专业人员来说,老板一般会放心的让你对数据库只进行查询操作; 3.2 条件查询(where&#xff09…

VBA 实现EXCEl的sheet转换成PDF

首先,打开Excel,然后按下 Alt F11 打开VBA编辑器。在VBA编辑器中,点击 插入 -> 模块,创建一个新的模块。在新模块中,复制并粘贴以下VBA代码: Sub ExportEachSheetToPDF()Dim ws As WorksheetDim pdfFo…

浏览器自带的IndexDB的简单使用示例--小型学生管理系统

浏览器自带的IndexDB的简单使用示例--小型学生管理系统 文章说明代码效果展示 文章说明 本文主要为了简单学习IndexDB数据库的使用&#xff0c;写了一个简单的增删改查功能 代码 App.vue&#xff08;界面的源码&#xff09; <template><div style"padding: 30px&…

基于深度学习的面片修复

基于深度学习的面片修复 面片修复&#xff08;Mesh Repair&#xff09;是计算机图形学和计算机视觉中的重要任务&#xff0c;旨在修复三维网格&#xff08;mesh&#xff09;中的缺陷&#xff0c;如孔洞、裂缝和噪声。基于深度学习的方法在面片修复中展现了强大的能力&#xff…

Flask初识

Flask初识 一、概念说明 1. flask介绍 Flask 是一个轻量级的 Web 应用框架&#xff0c;基于 Werkzeug WSGI 工具包和 Jinja2 模板引擎。 核心特点 微型框架&#xff1a;Flask 被称为“微”框架&#xff0c;因为它在设计上保持了核心的简洁和轻量。易于扩展&#xff1a;Flask…

2024年通信技术与计算机科学国际学术会议(ICCTCS 2024)

2024年通信技术与计算机科学国际学术会议&#xff08;ICCTCS 2024&#xff09; 2024 International Academic Conference on Communication Technology and Computer Science&#xff08;ICCTCS 2024&#xff09; 会议简介&#xff1a; 2024年通信技术与计算机科学国际学术会议…

PostgreSQL物理备份-pg_rman

1.简介 pg_rman 是类似于 oracle 的 rman 备份工具&#xff0c;它实现了全量、增量、归档等类型的备份&#xff0c; 可以很灵活的管理 PostgreSQL 数据库的备份。pg_rman 是一款开源的 PostgreSQL 的 备份恢复插件&#xff0c;支持在线备份和基于 PITR 的恢复方式。 2.pg_rma…

Leetcode.1735 生成乘积数组的方案数

题目链接 Leetcode.1735 生成乘积数组的方案数 rating : 2500 题目描述 给你一个二维整数数组 q u e r i e s queries queries &#xff0c;其中 q u e r i e s [ i ] [ n i , k i ] queries[i] [n_i, k_i] queries[i][ni​,ki​] 。第 i i i 个查询 q u e r i e s [ i …

JAVA SDK 整合 AI 大语言模型

目前主流模型厂商的 SDK 并没有很好的支持 JAVA 环境&#xff0c;主流还是使用的 Python &#xff0c;如果希望将 AI 功能集成到业务中来&#xff0c;则需要找找有没有一些现成的开源项目&#xff0c;但是这种项目一般需要谨慎使用&#xff0c;以防有偷取 app_key 等风险问题 前…

如何在Linux下使用git(几步把你教会)

目录 一、注册github账号 二、新建项目 1.点击右上角自己的头像&#xff0c;然后点击Your repositories。 2.点击New。 3.配置新项目信息。 4.点击Create repository即可成功创建。 三、安装git 四、配置git 五、初始化git仓库 1.先进入想要使用git的目录。 2.初始化…

数据时代的数字企业

1.写在前面 讨论数据治理在数字企业中的影响和必要性&#xff0c;并介绍数据治理的核心内容和实践方法。作者强调了数据质量、数据安全、数据隐私和数据合规等方面是数据治理的核心内容&#xff0c;并介绍了具体的实践措施和案例分析。企业需要重视这些方面以实现数字化转型和…

多孔散热器简介

今天给大家分享关于多孔散热器的一些构造、散热情况。 更多资讯&#xff0c;请关注B站【莱歌数字】&#xff0c;有视频教程~~ 常见的散热器通常由不渗透水、空气和其他液体的无孔材料制成。固体铝和铜是行业标准。 但散热器也可以作为半多孔材料或多孔涂层。研究和应用表明&…