css搞定所有垂直居中问题
单行文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
border: 1px solid #000;
height: 300px;
line-height: 300px;
}
</style>
<body>
<div id="container">
123123131
</div>
</body>
</html>
多行文本+图片+任意大小的块
后面提供的3个例子中，只要把里面的#pic 的宽高去除，也是可以实现任意大小的div居中的。往里面填充任意的多行文字，也是可以居中的。
实际上，有这样的规律：
任意大小的div垂直居中 =》任意多行文字垂直居中 =》 固定大小的div垂直居中 =》图片垂直居中
css3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
border: 1px solid #000;
height: 300px; /*display:-webkit-box;*/
/*-webkit-box-align:center; !*上下对齐*!*/
/*-webkit-box-pack:center; !*左右对齐*!*/
/*两种方式都可以居中*/ display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
#pic{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<body>
<div id="container">
<br>
33333333\
<br>
<div id="pic"></div>
</div>
</body>
</html>
运行结果：
后者 
外部容器 tableCell（IE6不支持） + middle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
border: 1px solid #000;
height: 300px;
display: table-cell;
vertical-align: middle;
}
#pic{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<body>
<div id="container">
123123131
<br>
33333333\
<br>
<div id="pic"></div>
</div>
</body>
</html>
运行结果：
兼容ie6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
border: 1px solid #000;
height: 300px;
}
#pic{
display: inline-block;
width: 150px;
vertical-align: middle;
border: 1px solid #000;
}
#container:before{
content:'';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
</style>
<body>
<div id="container">
<div id="pic" contenteditable>
1231233 <br>
1231233 <br>
1231233 <br>
1231233 <br>
1231233 <br>
1231233 <br>
</div>
1213
<br>
</div>
</body>
</html>
运行结果：
弹性布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
border: 1px solid #000;
height: 300px;
justify-content:center;
display: flex;
flex-direction:column;
}
#pic{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<body>
<div id="container">
<br>
33333333\
<br>
<div id="pic"></div>
</div>
</body>
</html>
运行结果：（往里面再套一个容器，实现水平居中，而容器是垂直居中，就可以实现内容屏幕居中了）
在flex布局之后比较新和重要的布局方式：grid
参考：https://juejin.im/entry/5894135c8fd9c5a19507f6a1
<style>
#root{
display: grid;
position: fixed;
width: 100%;
height: 100%; align-content:center; /*垂直居中*/
justify-content :center; /*水平居中*/
}
</style>
<body>
<div id="root">
1212313122
</div>
</body>
水平居中（前者必须指定宽度）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
border: 1px solid #000;
}
#pic{
width: 100px;
border: 1px solid #000;
margin: 0 auto;
}
/*#container{*/
/*border: 1px solid #000;*/
/*text-align: center;*/
/*}*/
/*#pic{*/
/*display: inline-block;*/
/*border: 1px solid #000;*/
/*}*/
</style>
<body>
<div id="container">
<div id="pic">1</div>
</div>
</body>
</html>
css搞定所有垂直居中问题的更多相关文章
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- 一天搞定CSS---终篇CSS总结
虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...
- 3D 穿梭效果？使用 CSS 轻松搞定
背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- 使用纯CSS方案，解决垂直居中
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...
- 一劳永逸的搞定 FLEX 布局（转）
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
- 搞定flex布局
这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置: .dad { position: relative ...
- 一劳永逸的搞定 flex 布局
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
随机推荐
- bzoj 4975: [Lydsy1708月赛]区间翻转【博弈论】
必败状态是倒序排列,也就是正序对为0 然后发现,每次翻转都是有奇数个数对(\( C_{4x+2}^{2} C_{4x+3}^{2} \) 都是奇数),所以每次翻转丢回改变正反数对的奇偶性 又因为偶数为 ...
- yield 为什么不能进入回调函数
操他妈的, allowed_domains = ['voice.hupu.com'] 这里面必须是域名,而不能是个路径,遇见问题不要瞎几把想,及时Google才是正道!!!!!!!!!11 感谢: h ...
- mycat启动报错UnknownHostException（Temporary failure in name resolution）解决方法
重启命令 ./mycat restart 查看日志 cd logs tail -f wrapper.log 报错信息 INFO | jvm 2 | 2018/05/09 11:28:28 | Erro ...
- 【算法】LRU算法
缓存一般存放的都是热点数据,而热点数据又是利用LRU(最近最久未用算法)对不断访问的数据筛选淘汰出来的. 出于对这个算法的好奇就查了下资料. LRU算法四种实现方式介绍 缓存淘汰算法 利用Linked ...
- sybase修改默认字符集为cp936
原文地址:http://blog.sina.com.cn/s/blog_4d6854860100xn3f.html 报错信息:2402 error converting characters into ...
- 递推DP HDOJ 5459 Jesus Is Here
题目传送门 题意:简单来说就是sn = sn-1 + sn-2递推而来,求其中所有c字符的:∑i<j:sn[i..i+2]=sn[j..j+2]=‘‘cff"(j−i) mod 530 ...
- vue 模拟后台数据（加载本地json文件）调试
首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...
- synchronize早已经没那么笨重
我发现一些同学在网络上有看不少synchronize的文章,可能有些同学没深入了解,只看了部分内容,就急急忙忙认为不能使用它,很笨重,因为是采用操作系统同步互斥信号量来实现的.关于这类的对于synch ...
- sql语句分为三类(DML,DDL,DCL)-介绍
本文知识来源自:<Oracle专家高级编程> 分享作者:Vashon 时间:20150415 DDL is Data Definition Language statements. Som ...
- 实战角度比较EJB2和EJB3的架构异同
] EJB编程模型的简化 首先,EJB3简化的一个主要表现是:在EJB3中,一个EJB不再象EJB2中需要两个接口一个Bean实现类,虽然我们以前使用JBuilder这样可视化开发工具自动生成了EJB ...