CSS之基于不同场景的垂直居中解决方案
元素的水平居中,如果是一个行内元素,就对它的父元素应用 “text-align:center”;
如果是一个块级元素,就对它自身应用“margin:auto”。
垂直居中的几种场景以及实现方法:
一、基于绝对定位的解决方案
1、绝对定位+固定宽高的垂直居中
原理:这种居中的方法本质上做了两件事,一是先把需要居中的元素的左上角放在视口(或具有定位属性的父元素)的正中心,二是再利用负外边距把它向左、向上移动自身宽高的一半,从而使元素水平和垂直居中(如下图所示)。
缺点:要求元素有固定的宽高,但很多情况下,居中元素的尺寸是由其内容来决定的。
那么对于未知宽高的元素如何实现垂直居中呢?这时我们可能会想到用百分比来解析,但问题是,包括margin在内的很多CSS属性,百分比都是以其父元素的尺寸为基准进行解析的。
2、绝对定位+自适应宽高的垂直居中
如果找到一个能以自身尺寸为基准进行解析的属性对元素进行移动变换问题是不是就迎刃而解了呢?细心的同学会发现,CSS3为我们提供的2D转换属性中的translate属性恰好是以元素自身尺寸为基准进行换算和移动的。
div{
position: absolute;
top: 50%;
left: 50%;
background: red;
transform:translate(-50%,-50%);
}
这样是不是就可以摆脱对固定尺寸的依赖实现垂直居中了。
二、基于视口单位的解决方案
有些情况基于对整体布局的考虑不想使用绝对定位,这时我们任然可以采用translate()技巧把元素以其自身宽高的一半为距离进行移动,只是在没有定位缺少left和top的情况下如何把元素的左上角放在容器的中心呢?如果只是相对于视口进行居中,依然使用margin就可以解决,只是需要使用一个很少见的单位 “vh”。
“vh” 是一个视口相关的长度单位,1vh表示视口高度的1%,50vh表示视口高度的一半,由此一个基于视口垂直居中的方法如下:
div{
margin: 50vh auto 0;
transform:translateY(-50%);
}
这种方法无需定位,可自适应高度
缺点:就是只适用于基于视口的垂直居中。
三、基于Flexbox(伸缩盒)的解决方案
我认为这是最简单也是最高效的方法,唯一需要注意的就是浏览器的兼容问题,只需要两行代码就可以搞定:
一是给待居中元素的父元素设置display:flex,再给自身设置 margin:auto即可。
body{
height: 100vh;
display: flex;
}
div{
margin: auto;
background: grey;
}
除此之外,给父元素指定一个固定尺寸,可借助 "align-items" 和 “justify-content" 属性对其子元素进行垂直和水平居中,这种方法同时也适用于文本,自此就不用太过纠结line-height了。
div{ display: flex; align-items: center; justify-content:center; width: 20em; height:10em; }
上面的代码随意改变div的宽高,里面文本始终保持水平和垂直居中。
本文是转自今日头条--》窗外楼 对文中提及的方法都逐一做了尝试,方法可行
CSS之基于不同场景的垂直居中解决方案的更多相关文章
- css 完美垂直居中解决方案兼容ie8以上等其他浏览器
css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...
- CSS水平居中和垂直居中解决方案
一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- #研发解决方案介绍#基于StatsD+Graphite的智能监控解决方案
郑昀 基于李丹和刘奎的文档 创建于2014/12/5 关键词:监控.dashboard.PHP.graphite.statsd.whisper.carbon.grafana.influxdb.Pyth ...
- 基于websocket vue 聊天demo 解决方案
基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- CSS实现未知高度图文混合垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...
随机推荐
- PHP的curl库代码使用
欢迎訪问个人原创地址: http://www.phpthinking.com/archives/468 使用PHP的cURL库能够简单和有效地去抓网页. 你仅仅须要执行一个脚本.然后分析一下你所抓取的 ...
- hdu Escape
Escape 题目: 非常裸的多重匹配. 可是点数较多,所以要用到状态压缩. . .. .. 第一次写. 好厉害的赶脚. #include <iostream> #include < ...
- HDU 1051: Wooden Sticks(贪心)
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- centos6高速部署java应用
眼下提供IDC服务的厂商真的是五花八门,可是更正服务到位的却为数不多,搞得比較好的应该是阿里云.天成.51idc,出于时间考虑还是建议选用windows,至少安装开发环境会方便得多,不会耗费太长时间. ...
- 显示解析svg
g公司代码显示svg: SVGParserRenderer drawable = new SVGParserRenderer(context, String svgContent); String s ...
- bzoj2464: 中山市选[2009]小明的游戏(最短路)
2464: 中山市选[2009]小明的游戏 题目:传送门 题解: 最短路的裸题... 代码: #include<cstdio> #include<cstring> #inclu ...
- 4.git "Could not read from remote repository.Please make sure you have the correct access rights."解决方案
转自:https://zhiku8.com/git-could-not-read-from-remote-repository.html 我们在使用git clone 或其他命令的时候,有时候会遇到这 ...
- validform
一.validform是什么? validform是一款智能的表单验证js插件,它是基于jQuery库与css,我们只需要把表单对象放入, 就可以对整个表 ...
- Excel中将字符串中从右起第n个指定字符替换的方法
比如你想把www.baidu.com.cn中的倒数第二个”.”替换成@,则可以用: =SUBSTITUTE(A1,".","@",LEN(A1)-LEN(SUB ...
- Net Core链接数据库
原文 在Windows下,相信大家分分钟都可以搞定.而初次接触.net core + mysql可能需要注意些细节.首先打开vs2017新建一个asp.net core项目(选Web应用程序), 然后 ...