CSS 实现垂直居中的几种方案
2016-06-13 22:37
597 查看
最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来,等博客搭完写一写 SQL 数据库基础相关的分享,给跟我一样的小白道友们做下参考,大神请直接无视~
说到居中,很多人第一反应应该是水平居中,说到水平居中,肯定道友们有一万种方法做到,CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌?
方式一 :table 布局方法
直接上🐴:
效果:
分析
优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;
缺点:IE8 还没搞定。
方式二:布局对象固定高度
就这样,我们实现了垂直和水平的居中
上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。
看吧,我们只是吧 margin 变成translate,其他浏览器的写法如下:
说到居中,很多人第一反应应该是水平居中,说到水平居中,肯定道友们有一万种方法做到,CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌?
方式一 :table 布局方法
直接上🐴:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> .container{ width: 200px; height: 200px; font-weight:bold;">deepskyblue; display: table; } .cell{ display: table-cell; vertical-align: middle; font-weight:bold;">lawngreen; } .content{ font-weight:bold;">yellow; } </style> <div class="container"> <div class="cell"> <div class="content"> Content </div> </div> </div> </body> </html>
效果:
分析
优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;
缺点:IE8 还没搞定。
方式二:布局对象固定高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vertical-center</title> </head> <body> <style> .container{ width: 200px; height: 200px; background-color: #003366; position: relative; text-align: center; display: table; } .content{ width:100px; height: 100px; background-color: yellow; position: absolute; top:50%; margin-top: -50px; left:50%; margin-left:-50px; } .point{ width:50px; height: 50px; position: absolute; top: 50%; margin-top: -25px; left:50%; margin-left:-50px; background-color: green; }
</style> <div class="container"> <div class="content"> <div class="point"> point goes here. </div> </div> </div> </body> </html>
就这样,我们实现了垂直和水平的居中
上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>haorooms不固定高度div写法</title> <style> .center { position: fixed; top: 50%; left: 50%; background-color: #000; width:50%; height: 50%; -webkit-transform: translateX(-50%) translateY(-50%); } </style> </head> <body> <div class="center"></div> </body> </html>
看吧,我们只是吧 margin 变成translate,其他浏览器的写法如下:
-webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 display:-webkit-flex;
就先写这么多吧,先吃饭去啦~
相关文章推荐
- 窗口按钮样式老旧解决方法
- CSS 隐藏页面元素的 5 种方法
- css如何垂直居中对齐
- CSS---清除inline-block元素4px右边距
- css样式标签和js语法属性区别
- CSS---div一行显示,超出以省略号代替
- iOS 学习之分段Table View的使用(Grouped样式表格)
- CSS3 @font-face使用实例
- css直接写出小三角
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- 编码规范(CSS)
- CSS3.0动画之hover---Y轴----3D旋转
- QT QGraphicsView QGraphicsScene用法
- js 模拟css3 动画3
- js 模拟css3 动画2
- 文本输入框的两种div+css的写法
- css实现省略号
- CSS的相对定位和绝对定位
- 使用footable的问题及解决方案
- 页面样式base.css