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;这些特性了,因此改进的办法 ...
随机推荐
- 用虚拟机安装Linux系统的过程
1.打开VMware->点击File->点击New Virtual Machine.. 2.我们选择Custom并点击Next 3.保持默认然后点next 4.选择图中所示内容,点Next ...
- PHP语言开发微信公众平台(订阅号)之curl命令
在开发过程中,经常会遇到要求用curl命令调用接口的情况 那么,什么是curl,简单来说curl是一个利用url语法规定来传输文件和哦数据的工具,支持很多协议,如 http.ftp.telent 等, ...
- oracle图形界面乱码
oracle界面乱码解决方案 在Linux的中文操作系统下使用xmanager进行Oracle进行安装的时候,可能出现乱码界面,可以通过以下方法进行解决 1 修改环境属性 vi /etc/sysco ...
- 实现Unity编辑器模式下的旋转
最近在做一个模型展示的项目,我的想法是根据滑动屏幕的x方向差值和Y方向的差值,来根据世界坐标下的X轴和Y轴进行旋转,但是实习时候总是有一些卡顿.在观察unity编辑器下的旋转之后,发现编辑器下的旋转非 ...
- eclipse中代码格式化组合键失效了
因为最近在整理java笔记,发现代码格式化的组合键失效了,但其他的组合键是好着的,设置里面找了也是对着的. 最后是在输入法的设置里面发现了它,原来是快捷键冲突了.取消输入法里面 的快捷键就好了,或者改 ...
- Android中查看布局文件中的控件(view,id)在哪里被调用(使用)
在阅读别人的代码时通常是很痛苦的,有时很想要看一看布局中的控件在哪里被调用了,为之很苦恼 在这里提供一种方法. 复制要查看的控件ID,到R文件中搜索到该ID, 接下来就好办的了,选中ID按下C ...
- (转)Nginx启动出错 error while loading shared libraries
[root@localhost conf]# /usr/local/nginx/sbin/nginx/usr/local/nginx/sbin/nginx: error while loading s ...
- iwebshop两表联查
$tb_goods = new IQuery('goods as g'); $tb_goods->join='left join miao as m on m.goods_id=g.id'; $ ...
- javascript的闭包与一次重构的感受
有没有这么一个场景,你的一个动作需要在所有异步方法执行完毕后,再进行操作?然而你对异步方法何时执行完毕感到困扰,只能在每个方法中写回调,在回调中重复劳动? 偶然的,想起了之前经理讲过的闭包的概念,偶然 ...
- Access SQL实现连续及不连续Rank排名
一.关于起因 在Excel中我们经常使用Rank函数对数据进行排名操作.而在Access中我们要进行排名是找不到这个Rank函数的,此时我们需要自己书写VBA代码或者建立SQL查询来完成排序操作. 今 ...