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,所以本文所贴出的方 ...
随机推荐
- poj 2960 S-Nim【SG函数】
预处理出SG函数,然后像普通nim一样做即可 #include<iostream> #include<cstdio> using namespace std; const in ...
- bzoj 2565: 最长双回文串【manacher+线段树】
因为我很愚蠢所以用了很愚蠢的O(nlogn)的manacher+线段树做法 就是开两个线段树mn和mx分别表示左端点在i的最长回文子串和右端点在i的最长回文子串 用manacher求出每个点的最长回文 ...
- Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) E
Description Bear Limak prepares problems for a programming competition. Of course, it would be unpro ...
- cordova 安卓项目打包 release安装包
问题描述: 打包安卓项目, 如果是在项目中只是使用debug包的话, 其中的签名方式使用的都是cordova框架本身, 那么每次打包的话, 都会把之前的安装包给覆盖掉. 现在打包做出一个release ...
- python_11(网络编程)
第1章 ucp协议 1.1 特性 1.2 缺陷 1.3 UDP协议实时通信 第2章 socket的更多方法 2.1 面向锁的套接字方法 2.1.1 blocking设置非阻塞 2.1.2 Blocki ...
- solr 统计中stats的一般用法
//统计数据 根据查询条件 public String getStats(String ipName) { JSONObject obj; JSONArray pageArray = new JSON ...
- C#: static关键字的作用(转)
C#: static关键字的作用 static意思是静态,可以修饰类.字段.属性.方法 标记为static的就不用创建实例对象调用了,可以通过类名直接点出来 static三种用法: 1.用于变量前 ...
- C#局部类型partial在定义实体类Model中的应用
以前一直用继承类的方法,原来还可以这样 //例如:定义一个Person的实体类,用户ID(PersonId),姓名(Name),性别(Sex),年龄(Age),地址(Address),联系方式(Tel ...
- C/C++ static
C/C++中static关键字作用总结 1.先来介绍它的第一条也是最重要的一条:隐藏.(static函数,static变量均可) 当同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全 ...
- 设置QtreeWidget水平滚动条
转载请注明出处:http://www.cnblogs.com/dachen408/p/7552603.html //设置treewidget水平滚动条 ui.treeWidget->header ...