CSS实现水平垂直居中 - 你可能不知道的其他方法

2015/08/07 17:35:35 | 作者：HTML5学堂（码匠） | 分类：HTML+CSS | 关键词：CSS,水平垂直,居中,float

CSS实现水平垂直居中-其他方法

HTML5学堂：最近给大家分享了许多水平垂直居中的方法，大家可以感受到，知识点虽然少，但是结合在一起的话，就出现了许多实现方法，可以总结出一句话：理解原理，重在灵活应用。不多说了，赶紧来看看其他的实现方法吧。

欢迎沟通交流~HTML5学堂

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap {
width: 400px;
height: 300px;
padding-top: 100px;
background-color: skyblue;
text-align: center;
}
.con {
/*展示特性转换成行块元素的展示特性*/
display: inline-block;
width: 200px;
height: 200px;
background: url("https://mmbiz.qlogo.cn/mmbiz/p6DwiaCENIB6pR8GhsfVeo7382t1SicdA8iahVpBPSRMaFPaHHLXuyXvkryL43R4GuLMOrhVvDFwwfprmH9f9EgVg/0?wx_fmt=jpeg") no-repeat;
background-size: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="con"></div>
</div>
</body>
</html>

利用text-align让块元素实现水平垂直居中

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - float布局的水平垂直居中</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap {
width: 400px;
height: 400px;
background-color: skyblue;
}
.wrap .outer {
/*设置浮动的目的是由内容撑开宽高*/
float: left;
/*设置相对定位*/
position: relative;
left: 50%;
top: 50%;
}
.inner {
position: relative;
left: -50%;
/*top:50%是不生效的，因为如果没给父元素设置高度，这个50%是计算不出来的, 所以用transform : translate3d(0, -50%, 0)。（参考大搜车前端博客）*/
/*top: -50%;*/
background-color: #999;
color: #fff;
transform : translate3d(0, -50%, 0);
}
</style>
</head>
<body>
<div class="wrap">
<div class="outer">
<div class="inner">HTML5学堂、刘国利、陈能堡</div>
</div>
</div>
</body>
</html>