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

全站频道

大家都在搜索：