css垂直居中布局总结
简介
总结记录一下经常需要用到垂直居中布局，欢迎补充(空手套。。。O(∩_∩)O)
以下栗子如果未特别标注同一使用这样的html结构
<div class="container">
<div class="content"></div>
</div>垂直居中布局
利用绝对定位和负margin
绝对定位可以很容易做到top:50%，现在只要再让目标元素上移自身高度的一半就垂直居中了
.container {
background: #777777;
height: 400px;
position: relative;
}
.container .content {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
background: #ee5f28;
}
优点：兼容性好
缺点：需要知道居中元素的高度
利用绝对定位和transform
.container {
background: #777777;
height: 400px;
position: relative;
}
.container .content {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: #ee5f28;
}- 优点：不需要考虑content元素的高度
- 缺点：兼容性
利用绝对定位和calc
.container {
background: #777777;
height: 400px;
position: relative;
}
.container .content {
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
background: #ee5f28;
}- 优点：相比于前面少了两条样式
- 缺点：兼容性
利用flex
.container {
background: #777777;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.container .content {
width: 100px;
height: 100px;
background: #ee5f28;
}.container {
background: #777777;
height: 400px;
display: flex;
}
.container .content {
width: 100px;
height: 100px;
background: #ee5f28;
margin: auto;
}- 优点：垂直居中特别容易搞定
- 缺点：兼容性
震惊absoulute（绝对定位）还可以这样用
.container {
background: #777777;
height: 400px;
position: relative;
}
.container .content {
width: 100px;
height: 100px;
background: #ee5f28;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}优点：
- 1.跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）；
- 2.无特殊标记，样式更精简；
- 3.自适应布局，可以使用百分比和最大最小高宽等样式；
- 4.居中时不考虑元素的padding值（也不需要使用box-sizing样式）；
- 5.布局块可以自由调节大小；6.img的图像也可以使用
- 6.浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以运行在IE8~IE10上
使用inline-block
.container {
background: #777777;
height: 400px;
text-align: center;
font-size: 0;
overflow: auto;
}
.container::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container .content {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: #ee5f28;
}这里注意：容器‘container’里要设置font-size:0;避免inline-block之间产生间隔
优点：
- 内容高度可变
- 内容溢出则能自动撑开父元素高度
- 浏览器兼容性好，甚至可以调整支持IE7
使用table与table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container-table {
background: #777777;
height: 400px;
width: 100%;
display: table;
}
.container-table .container-cell {
display: table-cell;
vertical-align: middle;/* 这里达到了垂直居中的效果 */
}
.container-table .container-cell .content {
width: 100px;
height: 100px;
margin: 0 auto;/* 利用margin值 水平居中*/
background: #ee5f28;
}
</style>
</head>
<body>
<div class="container-table">
<div class="container-cell">
<div class="content"></div>
</div>
</div>
</body>
</html>优点：
- 内容高度可变
- 内容溢出则能自动撑开父元素高度
- 浏览器兼容性好
- 缺点：额外标签
参考资料
css垂直居中布局总结的更多相关文章
- css布局 - 垂直居中布局的一百种实现方式（更新中...）
首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...
- CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- CSS 实现：父元素包含子元素，子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- CSS垂直居中总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS垂直居中精华总结
1 table-cell方式 将center元素的包含框display设置为table,center元素的display设置为table-cell,vertical-align设置为middle. ...
- CSS垂直居中指南
大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute; top bottom都设置为0 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 《CSS网站布局实录》读书笔记
从Web标准.HTML标记.CSS语法基础介绍到实用技巧,事无巨细.实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主 ...
随机推荐
- 【原创】数据库基础之Sqlite
官方:https://www.sqlite.org/index.html 简介 SQLite is a C-language library that implements a small, fast ...
- linux mint ubuntu 安装qq
git clone https://gitee.com/wszqkzqk/deepin-wine-for-ubuntu.gitcd deepin-wine-for-ubuntu./install.sh ...
- 深入理解hadoop之排序
MapReduce的排序是默认按照Key排序的,也就是说输出的时候,key会按照大小或字典顺序来输出,比如一个简单的wordcount,出现的结果也会是左侧的字母按照字典顺序排列.下面我们主要聊聊面试 ...
- RedisCluster 添加/删除节点
一,redis cluster命令行 //集群(cluster) CLUSTER INFO 打印集群的信息 CLUSTER NODES 列出集群当前已知的所有节点(node),以及这些节点的相关信息. ...
- deep_learning_Function_tf.equal(tf.argmax(y, 1),tf.argmax(y_, 1))用法
[Tensorflow] tf.equal(tf.argmax(y, 1),tf.argmax(y_, 1))用法 作用:输出正确的预测结果利用tf.argmax()按行求出真实值y_.预测值y最大值 ...
- linux工具之lsof
1.lsof ( list open files) lsof(list open files) 是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通 ...
- PTA ”写出这个数“
读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10的100次方. 输出格式: 在 ...
- Beta冲刺——星期四
这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 飞猪们 这个作业的目标 剩余任务预估,分配任务(开发,测试等).按要求提交当天冲刺报告. ...
- E - We Need More Bosses CodeForces - 1000E （tarjan缩点，树的直径）
E - We Need More Bosses CodeForces - 1000E Your friend is developing a computer game. He has already ...
- GitChat·人工智能 | 除了深度学习，机器翻译还需要啥？
本文开始要写作的时候,翻译圈里出了一个“爆炸性”的事件.6月27日下午,一个同传译员在朋友圈里爆料:某AI公司请这位译员去“扮演”机器同传,制造人工智能取代人工同传的“震撼”效果. 这个事件瞬间在译员 ...