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实现立方体自转效果
Mar 01 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 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
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python迭代用法实例教程
2014/09/08 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
24式加速你的Python(小结)
2019/06/13 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
《美丽的田园》教学反思
2014/03/01 职场文书
城管综合整治方案
2014/05/01 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2014年实验室工作总结
2014/12/03 职场文书
继续教育个人总结
2015/03/03 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
化验室安全管理制度
2015/08/06 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Rust中的Struct使用示例详解
2022/08/14 Javascript