纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯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实现垂直居中的7种方法的更多相关文章
- 纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...
- 顽石系列:CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- CSS 元素垂直居中的 6种方法
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...
- css 水平居中垂直居中的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS3实现垂直居中的九种方法
浏览时看到的资料,每个都做了测试,很好,就先收了~ 测试的是谷歌浏览器,没有任何问题,用360,IE11,火狐,搜狗浏览器做测试时,第五个方法在360,搜狗,和IE11有点问题,第七个在IE11有问题 ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
随机推荐
- Example018主页加载时获取焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js中各个类型的转换总结
字符串转换为数组: 1 正则表达式var string=“abcdedef”var obj=string.replace(/(.)(?=[^$])/g,"$1,").split ...
- const vector<int> 和 vector<const int>问题讨论
1.const vector <int> vec(10) —— 与const int a[10]是一回事,意思是vec只有10个元素,不能增加了,里面的元素也是不能变化的 vector&l ...
- 基于vue2.0的网易云音乐 (实时更新)
本人在自学vue,之后想在学习过程中加以实践.由于之前有做过jquery的播放器效果,ui仿照网易云,地址 www.daiwei.org/music 于是就想做vue 的网易云播放器,网上也有类似的项 ...
- 浅谈Ajax 异步的几点细节
1.浏览器执行到Ajax代码的这行语句的时候,发出了一个HTTP请求,欲想请求服务器上的数据.服务器此时开始I/O,所谓的I/O就是磁盘的读写,需要花费一些时间,所以不会立即产生下行的HTTP报文: ...
- 网站waf检测
WAFW00F WAFW00F识别和指纹Web应用防火墙(WAF)产品. 其工作原理是首先通过发送一个正常http请求,然后观察其返回有没有一些特征字符,若没有在通过发送一个恶意的请求触发waf拦截来 ...
- 遍历数组按学号找人,若找到则输出信息,否则输出"查无此人"
//建立一个类类型的数组,并向这个数组内添加学生信息,包括姓名和年龄等 **********************学生类************************** package prac ...
- Mybatis-多对多
先说一下需求: 在页面上显示数据库中的所有图书,显示图书的同时,显示出该图书所属的类别(这里一本书可能同时属于多个类别) 测试环境:MySQL.MyEclipse 创建表: 笔者这里使用 中间表 连接 ...
- 业余草教你解读Spark源码阅读之HistoryServer
HistoryServer服务可以让用户通过Spark UI界面,查看历史应用(已经执行完的应用)的执行细节,比如job信息.stage信息.task信息等,该功能是基于spark eventlogs ...
- firefox插件开发及源码下载
在个别情况下,由于数据量巨大,造成显示性能的明显下降,此时使用c++开发firefox插件,可以提高用户使用体验. test.html: 在插件中,我们导出3个函数给js:AddStr, Pause, ...