今天小编跟大家讲解下有关CSS 实现垂直居中的几种方法(必看) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS 实现垂直居中的几种方法(必看) 的相关资料,希望小伙伴们看了有所帮助。
最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来,等博客搭完写一写 SQL 数据库基础相关的分享,给跟我一样的小白道友们做下参考,大神请直接无视~
说到居中,很多人第一反应应该是水平居中,说到水平居中,肯定道友们有一万种方法做到,CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌?
•方式一 :table 布局方法
•直接上🐴:
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="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> <divclass="container"> <divclass="cell"> <divclass="content"> Content </div> </div> </div> </body> </html>效果:
•分析
•优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;
•缺点:IE8 还没搞定。
•方式二:布局对象固定高度
CSS Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="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> <divclass="container"> <divclass="content"> <divclass="point"> pointgoeshere. </div> </div> </div> </body> </html>•就这样,我们实现了垂直和水平的居中
上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <metahttp-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> <divclass="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 实现垂直居中的几种方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱蒂网。
原文地址:http://www.cnblogs.com/Slim-Shady/archive/2016/06/13/5582324.html
来源:爱蒂网