css中的垂直居中
最近对于css中垂直居中常见方法做了下总结，主要是想梳理下知识点。。。
垂直居中常见方法：
① absolute + margin负值
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position绝对定位</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{font-size: 12px;color: #FFFFFF;font-family: "Microsoft Yahei";line-height: 20px;}
.wrap{width: 20%;height: 20%;background: #429D46;position: absolute;left: 50%;margin-left: -10%;top: 50%;margin-top: -10%;}
.cnt{padding: 3%;}
</style>
</head>
<body>
<div class="wrap">
<div class="cnt">
<p>width: 20%;</p>
<p>height: 20%;</p>
<p>position: absolute;</p>
<p><span>left: 50%;</span> <span>margin-left: -10%;</span></p>
<p><span>top: 50%;</span> <span>margin-top: -10%;</span></p>
</div>
</div>
</body>
</html>
优点：兼容所有浏览器
缺点：需要给定高度
② display: table-cell
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table-cell</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{font-size: 12px;color: #FFFFFF;font-family: "Microsoft Yahei";line-height: 20px;}
.wrap{width: 20%;height: 200px;margin: 100px auto;background: #429D46;padding: 20px;display: table;overflow: hidden;}
.cnt{display: table-cell;vertical-align: middle;}
</style>
</head>
<body>
<div class="wrap">
<div class="cnt">
<p>.parentBox{display: table;}</p>
<p>.childBox{display: table-cell;vertical-align: middle;}</p>
</div>
</div>
</body>
</html>
优点：不用考虑子元素的内容长度
缺点：如果子元素的内容高度超过父级的高度时会发生溢出
③ dislay: inline-block + vertical-align: middle
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{font-size: 12px;color: #FFFFFF;font-family: "Microsoft Yahei";line-height: 20px;}
.wrap{width: 25%;background: #429D46;line-height: 300px;margin: 100px auto;text-align: center;}
.cnt{width: 20px;height: 20px;background: #FFFFFF;display: inline-block;vertical-align: middle;}
</style>
</head>
<body>
<div class="wrap">
<div class="cnt"></div>
</div>
</body>
</html>
缺点：如果子元素的内容高度超过父级的高度时会撑开父容器
④ absolute + margin: auto
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin: atuo;</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{font-size: 16px;font-family: "Microsoft Yahei";font-weight: bold;}
.box{width: 20%;height: 20%;background: #429D46;margin: auto;position: absolute;left: 0;top: 0;right: 0;bottom: 0;color: #FFFFFF;padding: 20px;overflow: hidden;}
</style>
</head>
<body>
<div class="box">
<p>margin: auto;</p>
<p>position: abosolute;</P>
<p>left: 0;top: 0;right: 0;bottom: 0;</p>
<p>需要声明高度</p>
<p>不支持IE7及以下浏览器</p>
</div>
</body>
</html>
缺点：脱离文档流
⑤ absolute + translate
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>translate</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{font-size: 16px;color: #FFFFFF;font-family: "Microsoft Yahei";line-height: 20px;}
.wrap{width: 20%;height: 20%;background: #429D46;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.cnt{padding: 5%;}
</style>
</head>
<body>
<div class="wrap">
<div class="cnt">
<p>width: 20%;</p>
<p>height: 20%;</p>
<p>position: absolute;</p>
<p><span>left: 50%;</span> <span>top: 50%;</span></p>
<p><span>transform: translate(-50%,-50%);</span></p>
</div>
</div>
</body>
</html>
优点：并不需要知道实际宽高，translate会帮忙计算
⑥ flex
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style type="text/css">
*{padding: 0;margin: 0;}
/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
/*.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
*/
.box{width: 300px;height: 300px;background: #429D46;margin: 100px auto;}
.cnt{width: 50px;height: 50px;background: #FFFFFF;}
.flex{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.flex-align-center{-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.flex-pack-center{-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
</style>
</head>
<body>
<div class="box flex flex-align-center flex-pack-center">
<div class="cnt"></div>
</div>
</body>
</html>
优点：不需要知道实际宽高
缺点：需要被包裹，加浏览器厂商前缀
总结：
浙公网安备 33010602011771号