工作心得——css让元素居中的方法

前言

今天在制作一个页面样式时,有一个要将卡片组件设置为页面水平居中需求,我采用的方法是将元素设为相对定位后再通过left和transform属性调成水平居中。如何让元素居中是页面设计中必不可少的,下面我将列举出一些常用的元素居中方法,希望能为读者提供思路。

文本居中

文本水平居中

如果你只是想让文本在块级元素水平居中,你可以使用 text-align:center。

div {  text-align: center;  
}

文本垂直居中

要让文本水平居中需要设置块级元素的高度等于其行高。

div{height: 100px;line-height: 100px;
}

块级元素水平居中

如果你想让块级元素在页面中水平居中,你可以使用 margin: auto;,但这需要设置元素的宽度。

div {  margin: auto;  width: 50%; /* 或者其他宽度值 */  
}

垂直和水平居中

如果你想让块级元素在页面中垂直和水平都居中,可以使用Flexbox或Grid布局。

使用Flexbox

css`div {  display: flex;  justify-content: center; /* 水平居中 */  align-items: center; /* 垂直居中 */  height: 100vh; /* 设置高度为视口高度,以便垂直居中 */  
}`

使用Grid

css`div {  display: grid;  place-items: center; /* 同时垂直和水平居中 */  height: 100vh; /* 设置高度为视口高度,以便垂直居中 */  
}`

使用定位和转换

这种方法稍微复杂一些,但也可以实现垂直和水平居中。

div {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  
}

该方法需要注意的是其样式可能会影响元素的动画效果。

总结

以上方法可能需要根据你的具体需求和上下文进行适当的调整。例如,你可能需要为父元素设置特定的属性,以便子元素能够正确地居中。

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

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

相关文章

【VTKExamples::PolyData】第三十二期 MergeSelections

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享VTK样例MergeSelections,并解析接口vtkSelection & vtkExtractSelection ,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U…

小何讲进程: 阻塞进程函数 wait()和waitpid()

1. wait()和waitpid()函数说明 wait() 进程一旦调用了wait(), 就立即阻塞自己,由wait自动分析是否有当前进程的某个子进程已经退出,如果让它找到了一个已经变成僵尸的子进程,wait就会收集这个子进程的信息,并把它彻底销毁后返回;如果没有找到这样一个子进程,wait就会一…

修改函数返回地址

资源下载 【免费】突破密码认证程序(修改函数返回地址)资源-CSDN文库 资源内容 源码 /*****************************************************************************To be the apostrophe which changed "Impossible" into "Im po…

Redis如何找出大量以某一个前缀开头的key

Redis如何找出大量以某一个前缀开头的key 使用keys命令 KEYS命令是一个非常耗费资源的命令,它需要在Redis中遍历整个键空间,因此应该尽量避免在生产环境中使用。如果需要查找的key非常多,可以考虑使用SCAN命令,或者使用其他更高效…

linux-firewalld防火墙端口转发

目的:通过统一地址实现对外同一地址暴露 1.系统配置文件开启 ipv4 端口转发 echo "net.ipv4.ip_forward 1" >> /etc/sysctl.confsysctl -p 2.查看防火墙配置端口转发之前的状态 firewall-cmd --statefirewall-cmd --list-all 3.开启 IP 伪装 firewall-cm…

LeetCode 第33天 | 1005. K 次取反后最大化的数组和 135. 分发糖果 134. 加油站

1005. K 次取反后最大化的数组和 按照绝对值大小降序排序,然后将负值变正,如果所有负值都正了,但是还有k余量且为奇数,那就将绝对值最小值(最后一个元素)取反,否则直接结束。 class Solution {…

sqlserver对已有的表插入列

现有如下的一个表; 现在要插入一个 人员id 列;如下图在设计视图的行首单击,选择 插入列; 然后添加一个 人员id 列; 保存,出现下图提示,不能保存设计; 这就直接使用sql语句更改&#…

【杂谈】裁我?我是研发,我是研发啊!

闲谈 这两年互联网是越来越不太平了,前有国外互联网裁员的妖风四起,后来寒气又传到国内,让我们这群打工人叫苦连天。最近有部电影蛮火的,叫《年会不能停》,感觉跟我前司很相似,不过好像由于今年业绩不太行…

反转链表【基础算法精讲 06】

视频地址 反转链表【基础算法精讲 06】_哔哩哔哩_bilibili 概念 链表的每一个结点都包含节点值 和1指向下一个结点的next指针 , 链表的最后一个结点指向空; 206 . 反转链表 用cur记录当前遍历到的结点 , 用pre表示下一个结点 , 用nxt表示cur的下一个…

如何修复Microsoft Edge不能以全屏模式打开​?这里提供几个故障排除方法

随着越来越多的Windows 10用户将Edge设置为默认浏览器,各种错误和小故障层出不穷。例如,许多用户抱怨他们无法在全屏模式下启动Edge。如果你正在寻找解决方案来解决这个恼人的问题,请按照下面的故障排除步骤进行操作。 修复Microsoft Edge不…

什么是智慧公厕,智慧公厕有哪些功能

1.什么是智慧公厕? 随着智慧城市的快速发展,公共厕所作为城市基础设施的一部分,也在逐步升级转型。那么,什么是智慧公厕?智慧公厕作为智慧城市的重要组成部分,将公共厕所的建设、设计、使用、运营和管理等…

codeforces 1500分

文章目录 1.[C. Partitioning the Array](https://codeforces.com/contest/1920/problem/C)2.[F. Greetings](https://codeforces.com/contest/1915/problem/F)3.[B. Plus and Multiply](https://codeforces.com/problemset/problem/1542/B)4.[B. Codeforces Subsequences](htt…

第4讲引入JWT前后端交互

引入JWT前后端交互 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519); JWT就是一段字符串,用来进行用户身份认证的凭证,该字符串分成三段【头部、载荷、签证】 后端接口测试&…

【JavaSE】类和对象

面向对象概述 面向对象编程(简称POP),其核心思想就是参照现实中的事物,将事物的属性特征、行为特征抽象出来,使用类来表示,当涉及到一个具体的实例时,就将类进行实例化,使用一个对象…

【镜头知识】对焦和变焦

前言 变焦 调整某几个镜片的相对位置,从而改变镜片组的焦距,进而改变图像的视场角度。 焦距和视角以及拍摄距离的关系这张图能更好的体现: 视角越窄,也意味着放大的倍数越大! 对焦 物体反射的光线,有很多不…

《Go 简易速速上手小册》第6章:错误处理和测试(2024 最新版)

文章目录 6.1 错误处理机制 - Go 语言中的优雅回旋6.1.1 基础知识讲解6.1.2 重点案例:文件读取器功能描述实现代码 6.1.3 拓展案例 1:网络请求处理器功能描述实现代码 6.1.4 拓展案例 2:数据库查询执行器功能描述实现代码 6.2 编写可测试的代…

RK3568笔记十七:LVGL v8.2移植

若该文为原创文章,转载请注明原文出处。 本文介绍嵌入式轻量化图形库LVGL 8.2移植到Linux开发板ATK-RK3568上的步骤。 主要是参考大佬博客: LVGL v8.2移植到IMX6ULL开发板_lvgl移植到linux-CSDN博客 一、环境 1、平台:rk3568 2、开发板:…

C++初阶(十一) list

一、list的介绍及使用 1.1 list的介绍 list的文档介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 2. list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立节点中,在节点…

简单聊聊k8s,和docker之间的关系

前言 随着云原生和微服务架构的快速发展,Kubernetes和Docker已经成为了两个重要的技术。但是有小伙伴通常对这两个技术的关系产生疑惑: 既然有了docker,为什么又出来一个k8s? 它俩之间是竞品的关系吗? 傻傻分不清。…

HTML5+CSS3小实例:彩色拨动开关

实例:彩色拨动开关 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><…