CSS中垂直居中的简单实现方法


Posted in HTML / CSS onJuly 06, 2015

大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了,但是垂直居中却没有相应的css属性来设置,而如果要设置元素能够垂直居中必须得将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
通过CSS3的transform来实现

CSS Code复制内容到剪贴板
  1. .center-vertical {   
  2.   positionrelative;   
  3.   top: 50%;   
  4.   transform: translateY(-50%);   
  5. }   
  6. .center-horizontal {   
  7.   positionrelative;   
  8.   left: 50%;   
  9.   transform: translateX(-50%);    
  10. }     

HTML / CSS 相关文章推荐
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 #HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 #HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 #HTML / CSS
You might like
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
php实现的顺序线性表示例
2019/05/04 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python算法学习之计数排序实例
2013/12/18 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python中id函数运行方式
2020/07/03 Python
如何表示python中的相对路径
2020/07/08 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
质检的岗位职责
2013/11/17 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
求职信需要的五点内容
2014/02/01 职场文书
黄金搭档广告词
2014/03/21 职场文书
公司合作意向书范文
2014/07/30 职场文书
法制教育演讲稿
2014/09/10 职场文书
小学优秀教师材料
2014/12/15 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
2019安全宣传标语大全
2019/08/14 职场文书