纯CSS实现垂直居中的7种方法
2024-08-31 04:06:03
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法。为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益!
在CSS中实现水平居中是非常简单的,行内元素设置其父元素的text-align:center,块级元素就对其自身应用magrin:auto。然而,实现垂直居中就有点麻烦了,首先它是极其常见的需求,看似简单,在实践中,往往难如登天,当设计尺寸不固定时尤其如此。以下是我找到的一些方法:
方法一:行高line-height
(1)单行文本居中
HTML代码(无特别标明,后面所有方法的HTML代码均为这个)
<div class="box1"> <div class="box2">垂直居中</div> </div>
CSS代码
.box1{ height: 100px; 3 } .box2{ line-height: 100px; }
(2)图片垂直居中
HTML代码
<div class="box1"> <img src="data:images/bg-sun.png" alt=""> </div>
CSS代码
.box1{ line-height:200px; } .box1 img{ vertical-align: middle; }
方法二:table-cell
CSS代码
.box1{ display: table-cell; vertical-align: middle; text-align: center; }
方法三:display:flex
(1)CSS代码
.box1{ display: flex; } .box2{ margin:auto; }
(2)CSS代码
.box1{ display: flex; justify-content:center; align-items:center; }
方法四:绝对定位和负边距
(1)CSS代码
.box1{ position: relative; } .box2{ position: absolute; top: 50%; left: 50%; margin-top: -10px;/*减去子元素高度一半*/ margin-left:-32px;/*减去子元素宽度一半*/ }
(2)CSS代码
.box2{ position: absolute; top:calc(50% - 10px);/*减去子元素高度一半*/ left:calc(50% - 32px);/*减去子元素宽度一半*/ }
方法五:绝对定位和0
HTML代码
<div class="box1"> <div class="box2"></div> </div> </body>
CSS代码
.box2{ width: 50%; height: 50%; background: #555; overflow: auto; margin: auto; position: absolute; ;;;; }
方法六:translate
(1)CSS代码
.box2{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
(2)HTML代码
<body> <div class="box1"> </div> </body>
CSS代码
.box1{ width: 200px; height: 200px; background: #666; margin: 50vh auto 0; transform: translateY(-50%); }
方法七:display:-webkit-box
HTML代码
<body> <div class="box1">垂直居中</div> </body>
CSS代码
.box1{ display: -webkit-box; -webkit-box-pack:center; -webkit-box-align:center; -webkit-box-orient: vertical; text-align: center }
最新文章
- css之IE透明度
- Ubuntu 网络参数设置
- 网络科学 - 社区发现 Community structure and detection及其几个实现工具
- stst
- 【转】兼容iOS 10 资料整理
- 【linux】文件隐藏属性
- Yii 框架中带有区间的搜索
- Web前端名词释义及原理
- 初识 Asp.Net内置对象之Server对象
- linux 输入子系统(1)----系统概述
- Android之TextView组件学习
- Eclipse标准版安装J2EE
- HealthKit框架参考(转)
- JSP标签库
- uva 12627
- Python中Generators教程
- Spring Boot启动过程(一)
- Linux 定时任务详解
- redis.clients.jedis.exceptions.JedisDataException: ERR invalid DB index
- MySQL高可用新玩法之MGR+Consul
热门文章
- KVO底层实现原理,仿写KVO
- 浅析ConcurrentHashMap
- java语言中的匿名类与lambda表达式介绍与总结 (Anonymous Classes and Lambda Expressions)
- JS内置对象学习总结
- “盛大游戏杯”第15届上海大学程序设计联赛夏季赛暨上海高校金马五校赛题解&;&;源码【A,水,B,水,C,水,D,快速幂,E,优先队列,F,暴力,G,贪心+排序,H,STL乱搞,I,尼姆博弈,J,差分dp,K,二分+排序,L,矩阵快速幂,M,线段树区间更新+Lazy思想,N,超级快速幂+扩展欧里几德,O,BFS】
- Linux工具之bc计算器进制的转换
- 【WeX5学习】 后端服务之访问数据库表
- language-detection 语言检测工具 java版的应用demo
- docker~windows版本的安装与使用
- 项目DEMO下载