当前位置:首页 > 技术分析 > 正文内容

css常用水平垂直居中方法(css中垂直水平居中的方式有哪些)

ruisui883个月前 (01-22)技术分析11

以下列举三种使元素水平垂直居中方法

一、利用vertical-align,text-align,inline-block实现

html:

//html
<div class="p">
  <div class="c">
   水平垂直居中
  </div>
 </div>

css:

效果如下:

二、用在移动端 ie11 chrome:利用flex实现

html:

<div class="p1">
  <div class="c1">
   水平垂直居中
  </div>
</div>

css:

效果如下:

三、利用绝对定位实现

html:

<div class="p2">
  <div class="c2">
   水平垂直居中
  </div>
 </div>

css:

效果如下:

.p2 {
 position: relative;
 width: 200px;
 height: 80px;
 background: orange;
 }
.c2 {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -80px;
 margin-top: -15px;
 /*用在移动端*/
 /*transform: translate(-50%,-50%);*/
 width: 160px;
 height: 30px;
 background: #EFEFF4;
 }

还有其他方法等待探索。。。。。。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/460.html

分享给朋友:

“css常用水平垂直居中方法(css中垂直水平居中的方式有哪些)” 的相关文章

Linux发行版需要杀软吗?卡巴斯基推出免费KVRT病毒扫描清理工具

IT之家 6 月 4 日消息,你认为使用 Linux 发行版,需要杀毒软件吗?或许很多用户认为 Linux 发行版偏小众,因此受到黑客攻击的风险也相对较小,不过卡巴斯基并不这么认为,近期推出了适用于 Linux 平台的杀毒软件。最新上线的 Linux 版本 Kaspersky Virus Remov...

微软的Linux发行版终于加入了对XFS根文件系统的支持

当许多Linux发行版在评估新的根文件系统选项或甚至像OpenZFS这样的特性,微软内部Linux发行版到本月才开始支持XFS作为根文件系统选项。随着这个月对微软内部Linux发行版CBL-Mariner的更新,他们现在支持XFS作为根文件系统。到目前为止,这个用于微软内部各种目的的Linux发行版...

vue 3 学习笔记 (八)——provide 和 inject 用法及原理

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套...

继Yuzu后,任天堂要求移除多个Switch模拟器项目

IT之家 7 月 11 日消息,任天堂美国分公司 (Nintendo of America) 已要求移除多个用于模拟 Nintendo Switch 游戏的开源模拟器项目,其中包括 Suyu、Nzu、Uzuy、Torzu、Sudachi 和 Yuzu-vanced 等。这些模拟器均被指控包含绕过任天...

掌握版本控制:Git的那些常见用法与技巧

Git作为现代开发中最常用的版本控制系统,它的普及和高效性使得程序员几乎每天都在与它打交道。无论是个人项目,还是团队协作,Git都能帮助我们追踪代码的修改历史,保证代码版本的管理井井有条,并在多人协作时有效地避免冲突。本文将分享一些常见的Git用法与技巧,帮助你更好地掌握Git的强大功能,并提升你在...

身体越柔软越好?刻苦拉伸可能反而不健康 | 果断练

坐下伸直膝盖,双手用力向前伸,再用力……比昨天前进了一厘米,又进步了! 这么努力地拉伸,每个人都有自己的目标,也许是身体健康、线条柔美、放松肌肉、体测满分,也可能为了随时劈个叉,享受一片惊呼。 不过,身体柔软,可以享受到灵活的福利,也可能付出不稳定的代价,并不是越刻苦拉伸越好。太硬或者太软,都不安全...