CSS元素垂直居中方法总结
坚持,坚持,坚持。。。
以上为自我鼓励,哈哈。。。
-------------------------------------------------
相信没有真正是尝试过的人应该都和我一样,觉得居中很简单啊,不是有个margin: auto嘛,如果你真正尝试过,你就知道,垂直居中真的不想你想象中那么简单。
在日常设计网页过程中,我们可以根据text-align: center实现行内元素水平居中问题,我们也可以根据margin: 0 auto实现块级元素水平居中问题。但是,对于垂直居中,一直都是一个很难解决但经常需要解决的问题。下面由我来给大家介绍几个解决方法。
1. 已知宽高,结合绝对定位和负margin来解决
首先使用绝对定位,使top和left属性可用。然后将元素通过top和left向下移动适口的50%,此时,元素的左上角位于视口中心点;最后通过负margin来移动元素自身的一半,将元素的中心点移至视口中心点。
body {
width: 100vw; // vw:是视口宽度的1/100
margin:;
padding:;
} /* 在已知宽高的情况下,使用负margin解决*/ #way1 {
width: 300px;
height: 200px;
background: #f33;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
}
2. 未知宽高,结合绝对定位和translate来解决
大多数情况下,元素的高度都是由内容撑高,因此我们很难用负margin来进行移动,css中大部分属性百分比都是相对于父级元素,如padding。但是,我们可以发现translate中的参数是相对于自身的。因此我们就可以利用translate,实现前面负margin的功能。
body {
width: 100vw;
margin:;
padding:;
} /* 在不知道宽高的情况下,translate属性移动元素本身*/ #way2 {
width: 300px;
height: 200px;
background: #f33;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. 结合margin和translate来解决
我们知道,margin可以实现块级元素的水平居中问题,我们可以直接利用margin来进行水平居中操作,在用translate来进行垂直居中。
body {
width: 100vw;
margin:;
padding:;
} /* 使用margin对元素进行居中,同时利用vh单位获取视口一半高度 */ #way3 {
width: 300px;
height: 200px;
background: #f33;
margin: 50vh auto 0; //vh: 视口高度的1/100
transform: translate(0, -50%);
}
4. 使用flexbox实现
正常情况下,margin只能实现水平居中,但是当我们在需要居中元素的父元素设置为flexbox,此时margin:auto就会同时设置水平和垂直居中。
body {
width: 100vw;
margin:;
padding:;
display: flex;
} /* 父元素需要设置为flexbox,并且需要设置高度,margin:auto将会在水平和垂直方向上都居中; */ #way4 {
width: 300px;
height: 200px;
background: #f33;
margin: auto;
}
5. 使用flexbox中的align-items和justify-content属性实现
这种方法,必须要设置父元素的高度,否则无法实现垂直上的居中。
body {
width: 100vw;
margin:;
padding:;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
} /* 可以在父元素上设置aligin-items和justify-content为center实现居中 */ #way5 {
width: 300px;
height: 200px;
background: #f33;
}
传统方法中,会利用表格的特性实现居中效果,也可以利用js来实现效果。上面用到了很多CSS3的属性,可能会存在兼容性问题,望大家根据自己的实际情况有针对性的选择。
CSS元素垂直居中方法总结的更多相关文章
- css元素垂直居中方法
1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...
- CSS图片垂直居中方法
让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...
- css元素垂直居中
一.碎碎念:啊啊啊,原谅我只能起一个酱紫微大众微俗气的标题,因为实在没有什么能比这样表达的更清楚直观了呢! 二.没有知识储备,直接上示例: 1.思路:给父元素添加display: table属性:给子 ...
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- CSS 元素垂直居中的 6种方法
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...
- css元素垂直居中的8中方法
1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...
- css水平垂直居中方法(一)
第五种方法: 首先设置一个div,设置其的width与height,为了方便观察,我定义了div的背景色为red,代码如下: <!doctype html> <html lang=& ...
- css 元素居中方法
目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
随机推荐
- 数据库 t-sql 语句
sql 高级语句 在基础语句上加上条件 条件修改: update 表名set 列明=要修改的值 where 列名 =原来的值 条件删除 删除 这个值的的一行 delete from 表名 ...
- 深入理解ajax系列第四篇——FormData
前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利. ...
- 1755: [Usaco2005 qua]Bank Interest
1755: [Usaco2005 qua]Bank Interest Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 187 Solved: 162[Su ...
- win7下Apache2.4安装、配置及服务自启动
为了测试微信平台接口,在电脑上安装的Apache服务器,把安装步骤记下来以后备用 第一篇文章,不好请见谅 Apache2.4.17下载地址:http://www.apachelounge.com/do ...
- windows phone 8.1开发:锁屏提醒
原文出自:http://www.bcmeng.com/lockscreen/ 之前小梦和大家分享了toast通知,磁铁更新,今天小梦和大家分享windows phone 8.1开发中的锁屏提醒.相比t ...
- 【子非鱼】归并排序过程呈现之java内置GUI表示
在网上看到一个视频将各种排序用视频表示出来,配上音乐,挺好玩的样子,就算是不会编程的人看到也会觉得很舒服,碰巧我也正在写归并算法,于是就用java的GUI实现一个. 归并排序的时间复杂度是T(n)=O ...
- WebX框架学习笔记之二----框架搭建及请求的发起和处理
框架搭建 执行环境:windows.maven 执行步骤: 1.新建一个目录,例如:D:\workspace.注意在盘符目录下是无法执行成功的. 2.执行如下命令: mvn archetype:gen ...
- 在ExpressJS中设置二级域名跨域共享Cookie
问题:我使用expressjs和mongostore来管理session.下面是expressjs中的设置. app.configure(function(){ app.use(express.ses ...
- Servlet实现的三种方式
实现Servlet的三种方式:一个实现,两个继承 /*========================================== * servlet的执行过程: * 1.创建servlet对 ...
- POPTEST老李分享session,cookie的安全性以及区别 3
如何查看服务器端输送到我们电脑中的这些Cookie信息: 点开IE浏览器或其他浏览器,在菜单栏中有工具选项,点开有InterNet选项: Cookie名称.来源.文件格式( ...