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,所以本文所贴出的方 ...
随机推荐
- hdu 1558 Segment set 计算几何+并查集★
#include <cstdio> #include <iostream> #include <string.h> using namespace std; ; # ...
- hdu1272 小希的迷宫 基础并查集
#include <iostream> #include <cstdlib> #include <cstdio> #include <algorithm> ...
- Window下完全卸载删除Nodejs
如何从Windows中删除Node.js: 1.从卸载程序卸载程序和功能. 2.重新启动(或者您可能会从任务管理器中杀死所有与节点相关的进程). 3.寻找这些文件夹并删除它们(及其内容)(如果还有). ...
- jquery $.trim()方法的介绍
http://www.jb51.net/article/50282.htm
- 接口测试postman和Jmeter
接口测试属于功能测试的范畴,一般来说分为两种,一种是程序内部的接口,一种是系统对外的接口. postman测试接口 1. get请求: (1) 直接在浏览器中输入接口地址+?+参数 (2)使用post ...
- Python函数和面向对象题目
- codeforces 149D Coloring Brackets (区间DP + dfs)
题目链接: codeforces 149D Coloring Brackets 题目描述: 给一个合法的括号串,然后问这串括号有多少种涂色方案,当然啦!涂色是有限制的. 1,每个括号只有三种选择:涂红 ...
- Android课程设计第二天界面排版
注意:课程设计只为完成任务,不做细节描述~ 老师叫我们做一个这个样子,然后.. <?xml version="1.0" encoding="utf-8"? ...
- luogu P3371 & P4779 单源最短路径spfa & 最大堆优化Dijkstra算法
P3371 [模板]单源最短路径(弱化版) 题目背景 本题测试数据为随机数据,在考试中可能会出现构造数据让SPFA不通过,如有需要请移步 P4779. 题目描述 如题,给出一个有向图,请输出从某一点出 ...
- h5-24-百度地图-地址解析
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...