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,所以本文所贴出的方 ...
随机推荐
- Spring 中的 18 个注解，你会几个？
阅读本文大概需要 4 分钟. 作者:Java的小本家 @Controller 标识一个该类是 Spring MVC controller 处理器,用来创建处理 http 请求的对象. @RestCon ...
- Jquery | 基础 | 慕课网 | 基本筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- About set HDU - 4680
https://vjudge.net/problem/HDU-4680 一直想写,终于写完了... 要点: 这个set不需要去重 操作4的做法就是暴力枚举取的数(最开始两个取set中最小两个,设这次取 ...
- 18.3.1获得Class对象
package d18_3_1; /** * Java中的java.lang.Class,简单理解就是为每个java对象的类型标识的类, * 虚拟机使用运行时类型信息选择正确的执行方法,用来保存这些运 ...
- 正则表达式test报错 is not a function
var reg = "/^1[34578]\d{9}$/"; //错误格式,这是一个字符串 var reg2 = /^1[34578]\d{9}$/; //正确格式 reg .te ...
- HBase文档操作--练习篇
1.查询学生的所有信息 数据准备 var persons = [{ name:"jim", age:25, email:"75431457@qq.com", c ...
- AJPFX总结Java 程序初始化过程
觉得Core Java在Java 初始化过程的总体顺序没有讲,只是说了构造器时的顺序,作者似乎认为路径很多,列出来比较混乱.我觉得还是要搞清楚它的过程比较好.所以现在结合我的学习经验写出具体过程: 过 ...
- IO（下）
7. 标准输入.输出流 7.1 标准输入流 源数据源是标准输入设备(键盘.鼠标.触摸屏)等输入设备.在java中用http://System.in 得到一个 InputStream 字节输入流. 需求 ...
- [转]java注解与APT技术
下面是一个简单的自定义注解的栗子: package annotation; import java.lang.annotation.Documented; import java.lang.annot ...
- Java 11 正式发布，支持期限至2026年9月
美国当地时间9月25日,Oracle 官方宣布 Java 11 (18.9 LTS) 正式发布,可在生产环境中使用!这是自 Java 8 后的首个长期支持版本,非常值得大家的关注,可以通过下面的地址进 ...