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 给背景设置渐变色的方法
Sep 12 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
PDO::inTransaction讲解
2019/01/28 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JS简单计算器实例
2015/01/20 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python自动翻译实现方法
2016/05/28 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python实现抖音视频批量下载
2018/06/20 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python for循环及基础用法详解
2019/11/08 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
法律六进活动方案
2014/03/13 职场文书
学校四风对照检查材料
2014/08/28 职场文书
python 下载文件的几种方式分享
2021/04/07 Python