CSS 垂直居中

1、使用绝对定位垂直居中

  绝对对位原理:元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width。

复制代码
.absolute_center{/*display:none;*/position:absolute;width:200px;height:200px;top:0;bottom:0;left:0;right:0;margin:auto;background:#518fca;resize:both;/*用于设置了所有除overflow为visible的元素*/overflow:auto;}
复制代码

   使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现

  优点:支持响应式,只有这种方法在resize之后仍然垂直居中

  缺点:没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条

  

   2、负marginTop方式

  已知元素高度后,使用绝对定位将top设置为50%,mergin-top设置为内容高度的一半(height padding) / 2;内容超过元素高度时需要设置overflow决定滚动条的出现

  原理:top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;

复制代码
                .negative_margin_top{position:absolute;top:50%;left:0;right:0;margin:auto;margin-top:-100px; /*-(height padding)/2*/width:200px;height:200px;}    
复制代码

   优点:代码量少、浏览器兼容性高支持ie6 ie7

  缺点:不支持响应式(不能使用百分比、min/max-width)

 

   3、借助额外元素floater

   元素高度已知,在center元素外插入一个额外元素floater,设置floater的height为50%;margin-bottom为center元素高度的一半(height padding) / 2。内容超过元素高度时需要设置overflow决定滚动条的出现。

  原理与2方法类似,floater的下边界是包含框的中心线,负下外边界保证center的中心线与包含框中心线重合。

 View Code
复制代码
            .floater{height:50%;margin-bottom:-100px;}.floater_center{height:200px;width:200px;margin:auto;}
复制代码

   优点:浏览器兼容性好,支持旧版本ie

  缺点:需要额外元素,不支持响应式

 

   4、table-cell方式

  将center元素的包含框display设置为table,center元素的display设置为table-cell,vertical-align设置为middle。

  原理:利用表布局特点,vertical-align设置为middle后,单元格中内容中间与所在行中间对齐

 View Code
复制代码
        .container2{display:table;height:100%;}.table_cell{/*将cell垂直居中,如果外层div不为table则tablecell必须有高度*/display:table-cell;vertical-align:middle;}
复制代码

   优点:支持任意内容的可变高度、支持响应式

  缺点:每一个需要垂直居中的元素都会需要加上额外标签(需要table、table-cell两个额外元素)

   

  5、inline-block方式

  将center元素display设置为inline-block,vertical-align设置为middle,为包含框设置after伪元素,将伪元素display设置为inline-block,vercial-align设置为middle,同时设置height为100%,撑开容器。

  原理:为同一行的inline-block元素设置vertical-align:middle,该行内的inline-block元素会按照元素的垂直中心线对齐。

 View Code
复制代码
        .container{display:block;}/*inline-block的前世今生*/.container:after{content: '';display: inline-block;vertical-align: middle;height: 100%;}.inline_block{display:inline-block;vertical-align:middle;}
复制代码

   优点:支持响应式、支持可变高度

  缺点:会加上额外标记

  

  6、line-height方式

  该方式只适用于情况比较简单的单行文本,将line-height设置与元素高度同高。

  原理:如果line-height高度大于font-size,生于高度浏览器会平分到文字上下两端。

            <div class="single_line">其实我们每个人的生活都是一个世界,即使最平凡的人也要为他生活的那个世界而奋斗。</div>
            .single_line{height: 30px;font-size: 14px;line-height: 30px;border: 1px solid #518dca;}

   优点:简单明了

  缺点:只适用于单行文本,局限性大

 

  7、弹性盒式布局

  利用弹性盒式布局,将字元素的主轴、侧轴的排列方式都设置为居中对齐

  原理:使用CSS弹性盒

 View Code
复制代码
.is-Flexbox {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;
}
复制代码

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java EE拦截器

历史 我认为重要的是要看一下Java EE中的Interceptor的发展&#xff0c;因为它是从EJB特定的项目开始的&#xff0c;后来又演变成一个单独的规范&#xff0c;现在可供其他Java EE规范扩展&#xff0c;这一事实很简单。 版本1.0 拦截器最初是在EJB 3.0 &#xff08; Java EE 5的…

New Begin

已经研究生三年级了&#xff0c; 最近也找好了工作&#xff0c;应该要开始自己的程序人生了。 虽然说写程序也写了很一段时间了&#xff0c; 决定现在开始在cnblogs这个&#xff0c;记录下自己的学习轨迹。开始维护自己的blogs。转载于:https://www.cnblogs.com/binzeehale/ar…

[ExtJs6] 环境搭建及创建项目

1. 环境搭建 sencha cmd 和 extjs6 sdk.sencha cmd: https://www.sencha.com/products/extjs/cmd-download/extjs6: https://www.sencha.com/sencha cmd 安装过程将其加入系统的环境变量path中。export PATH${PATH}:/Users/shuanggai/bin/Sencha/Cmd/6.2.2.36把改语句添加到 ~/…

通过Spring Integration和RabbitMQ获得高可用性的AMQP支持的消息通道

Spring Integration消息通道默认情况下将消息存储在内存中。 这是因为内存速度快&#xff0c;易于实现&#xff0c;并且不会增加网络成本。 但是&#xff0c;在某些情况下&#xff0c;这可能会引起问题&#xff0c;因为如果应用程序崩溃或服务器意外关闭&#xff0c;所有消息都…

有机会多熟悉下开源框架

Struts2&#xff0c;Spring&#xff0c;Hibernate等开源框架的使用转载于:https://www.cnblogs.com/yqskj/archive/2012/11/05/2756085.html

vue之node.js的简单介绍

一、什么是node.js&#xff1f; 它是可以运行JavaScript的服务平台&#xff0c;可以吧它当做一门后端程序&#xff0c;只是它的开发语言是JavaScript 二、安装 1、node.js的特性&#xff1a; - 非阻塞IO模型- 时间驱动 2、运用的场景&#xff1a; - 高并发低业务- 实时场景- 聊…

Java 8 StringJoiner

在Java 8发行版中&#xff0c;最受关注的是Lamda&#xff0c;新的Date API和Nashorn Javascript引擎。 在这些阴影下&#xff0c;有较小但有趣的变化。 其中之一是StringJoiner的引入。 StringJoiner是用于分隔字符或字符串列表的实用程序。 您可能会认出以下代码&#xff1a; …

设置TextView为下划线的样式

1 tvUserTel.setText(Html.fromHtml("<u>"usertel"</u>")); 2 tvUserTel.setTextColor(Color.BLUE);//设置为蓝色 转载于:https://www.cnblogs.com/Tristan2012/archive/2012/11/06/2757239.html

jQuery之jQuery扩展和事件

一、jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点&#xff08; 搜索框例子&#xff09; change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn])…

JavaFX列表示例

这是使用JavaFX构建的示例列表应用程序。 该应用程序是待办事项列表。 此应用程序具有添加&#xff0c;更新和删除列表中项目的功能。 列表数据存储在HSQLDB关系数据库中。 该应用程序使用JDBC&#xff08;Java数据库连接&#xff09;API访问数据库。 该应用程序打包为可执行JA…

flex弹性布局操练2

上一个是练习的1个内元素的&#xff0c;这次练习两个元素的。 ul.box1 {list-style:none;background-color:black;display:flex;justify-content:space-between;/*水平轴的位置,默认是flex-start就是第一种情况*/align-items:center;/*垂直轴的位置*/width:100px;height:100px;…

CDI 2.0更新

CDI 2.0是Java EE平台的上下文和依赖项注入的下一个版本&#xff0c;并且是Java EE 8中包含的候选对象。 自2014年9月以来&#xff0c;它一直在开发中&#xff0c;并且发展Swift&#xff01; CDI 2.0的主要目标 与Java SE 8对齐&#xff08;当然&#xff01;&#xff09; 支持…

一段js实现复制文本内容到剪切板

<script type"text/javascript"> function copyUrl2(){var Url2document.getElementById("biao1").innerText;var oInput document.createElement(input);oInput.value Url2;document.body.appendChild(oInput);oInput.select(); // 选择对象docum…

【Android】自带Theme

?android:theme"android:style/Theme.Dialog" 将一个Activity显示为对话框模式?android:theme"android:style/Theme.NoTitleBar" 不显示应用程序标题栏?android:theme"android:style/Theme.NoTitleBar.Fullscreen" 不显示应用程序标题栏&…

使用Maven Failsafe和JUnit @Category将集成测试与单元测试分开

为什么单元测试应与集成测试分开运行 单元测试级别的TDD相当简单&#xff0c;因为单元测试中的类要么没有复杂的依赖关系&#xff0c;要么使用模拟框架&#xff08;例如Mockito&#xff09;来模拟依赖关系。 但是&#xff0c;当我们进入集成测试时&#xff0c;TDDSwift变得困难…

SVN功能小结 .

基本操作1同步在MyEclipse J2EE透视图下,右击你要同步的工程->小组->与资源库同步->这时会进入同步透视图,会显示出本机与SVN上内容有不同的文件,双击文件名,会显示出两个文件中哪里不同;2提交在同步透视图下有”灰色向右的箭头,表示你本机修改过”,右击该文件,可以选…

Selenium1 Selenium2 WebDriver

内容摘要&#xff1a; Selenium 1 原理WebDriver WebDriver 组件WebDriver 协议 Remote End 处理流程Commands & Endpoints & 请求路由错误消息 WebDriver 配置 Selenium 2 1、Selenium 1 原理 (1).测试用例&#xff08;Testcase&#xff09;通过Client Lib的接口向Se…

Fork / Join框架vs并行流vs.ExecutorService:最终的Fork / Join基准

Fork / Join框架在不同配置下如何工作&#xff1f; 就像即将上映的《星球大战》一样&#xff0c;围绕Java 8并行性的批评也充满了兴奋。 并行流的语法糖带来了一些炒作&#xff0c;就像我们在预告片中看到的新型光剑一样。 现在&#xff0c;有了许多使用Java进行并行处理的方法…

CSRF攻击与防御

CSRF是什么 CSRF在百度百科中是这么说的&#xff1a;“CSRF&#xff08;Cross-site request forgery跨站请求伪造&#xff0c;也被称为“one click attack”或者session riding&#xff0c;通常缩写为CSRF或者XSRF&#xff0c;是一种对网站的恶意利用。尽管听起来像跨站脚本&a…

抽象泄漏,或如何正确地将Oracle DATE与Hibernate绑定

我们最近发布了一篇文章&#xff0c;介绍如何在SQL / JDBC和jOOQ中正确绑定Oracle DATE类型 。 这篇文章在Reddit上颇受关注&#xff0c; Vlad Mihalcea对此发表了有趣的评论&#xff0c;他经常在其博客上撰写有关Hibernate&#xff0c;JPA&#xff0c;事务管理和连接池的博客 …