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,所以本文所贴出的方 ...
随机推荐
- P5154 数列游戏（区间dp）
传送门 果然和dp有关的东西我绝对做不出来啊-- 设\(dp[i][j]\)表示消完区间\([i,j]\)中的数之后能得到的最大分数,如果消不完则为\(-inf\),否则枚举断点.顺便如果\(a[i] ...
- 如何阻止浏览器的默认事件，你是否也遇到过无法阻止Google默认事件的情况( 原生JS )
如题,话不多话,我们先看怎么解决 根据不同的绑定事件的方法,我们有不同的阻止默认事件的方法 如果你不知到如何绑定事件,请查看我的上一篇文章 关于浏览器滚动的兼容性问题以及事件绑定 1.句柄绑定 只需要 ...
- HDU 6183 Color it(动态开点线段树)
题目原网址:http://acm.hdu.edu.cn/showproblem.php?pid=6183 题目中文翻译: Time Limit: 20000/10000 MS (Java/Others ...
- web.xml报错：Invalid content was found starting with element 'init-param'
问题与分析 在web.xml中配置servlet节点时报错如下: cvc-complex-type.2.4.a: Invalid content was found starting with ele ...
- [NewTrain 10][poj 2329]Nearest Number - 2
题面: http://poj.org/problem?id=2329 题解: 这题有很多做法 1. 搜索 复杂度$O(n^4)$ 但是实际上远远达不到这个复杂度 所以可以通过 2. 对于每一个格子,我 ...
- 洛谷P3379lca,HDU2586,洛谷P1967货车运输,倍增lca,树上倍增
倍增lca板子洛谷P3379 #include<cstdio> struct E { int to,next; }e[]; ],anc[][],log2n,deep[],n,m,s,ne; ...
- 条形码问题 dp+求某个序列在某种排列中的序号的方法
题目 条形码是一种由亮条(Light Bar)和暗条(Dark Bar)交替出现且以暗条为起头的符号,每条都占有若干个单位宽.图33-1给出了一个含有4个条的条形码,它延续了1+2+3+1=7单位的宽 ...
- 递推DP HDOJ 5092 Seam Carving
题目传送门 /* 题意:从上到下,找最短路径,并输出路径 DP:类似数塔问题,上一行的三个方向更新dp,路径输出是关键 */ #include <cstdio> #include < ...
- LN : leetcode 494 Target Sum
lc 494 Target Sum 494 Target Sum You are given a list of non-negative integers, a1, a2, ..., an, and ...
- iOS 创建xcode插件
苹果的"一个足以应付所有"策略使得它的产品越来越像一个难以下咽的药丸.尽管苹果已经将一些工作流带给了iOS/OS X的开发者,我们仍然希望通过插件来使得Xcode更加顺手! 虽然苹 ...