如何居中一个div?
CSS 实现垂直居中的几种方案
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，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;
position: relative;
text-align: center;
display: table;
}
.content{
width:100px;
height: 100px;
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;
}</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;
-
