居中
2015-11-08 22:36 we星星 阅读(162) 评论(0) 编辑 收藏 举报大致有4种方法实现：
一、table布局(display:table)
二、绝对布局（position:absolute）+translate
三、转化为行内标签display:inline-block，借助另外一个标签高度来实现
四、通过js的获取标签的宽高来控制位置，得在元素加载完成后调用js
肯定还有其他方法可以实现，我目前就发现这几种，比较推荐第二种和第四种。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>未知宽度高度的水平垂直居中(4种)</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*未知宽度高度的水平垂直居中(一)：
* 如果放在body中，则需要给html,body设置一个“height:100%”的属性。
* display:table;
* display:table-cell;
* vertical-align: middle;
* */
h1{font-weight: normal;}
body{
margin: 0;
padding: 0;
}
.section{
width: 1200px;
height: 500px;
margin: 0 auto;
position: relative;
text-align: center;
}
.section-1{
background: #666;
}
.table{
width: 100%;
height: 100%;
display: table;/*定义成表结构*/
position: relative;
background: #666;
}
.tablecell{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content{
font-size: 30px;
line-height: 1.5;
}
/*未知宽度高度的水平垂直居中(二)：
* 采用的position: absolute，然后用translate移动位置。translate的比例针对的是元素本身的宽高
* */
.section-2{
background: #333;
color: #fff;
}
.section-2 .middle{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
/*未知宽度高度的水平垂直居中(三)：
* 采用的display:inline-block，然后借助另一个元素的高度来实现居中
* */
.section-3 {
/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/
background: #999;
}
#vertically_center,#extra {
display: inline-block;/*把元素转为行内块显示*/
vertical-align: middle;/*垂直居中*/
text-align: center;
}
#extra {
height: 100%; /*设置线盒型为父元素的100%高度*/
}
/*未知宽度高度的水平垂直居中(四)：
* 通过js获取计算宽高
* */
.section-4{
background: #000;
color: #fff;
}
</style>
</head>
<body>
<!-- method-1 -->
<div class="section section-1">
<div class="table">
<div class="tablecell">
<h1>未知宽度高度的水平垂直居中(一)</h1>
<p class="content">
目前太阳模式仅用于体验<br />
更多功能敬请关注APP更新
</p>
</div>
</div>
</div>
<!-- method-2 -->
<div class="section section-2">
<div class="middle">
<h1>未知宽度高度的水平垂直居中(二)</h1>
<p>
目前太阳模式仅用于体验<br />
更多功能敬请关注APP更新
</p>
</div>
<div id="extra"></div>
</div>
<!-- method-3 -->
<div class="section section-3">
<div class="wrap">
<p class="content">
未知宽度高度的水平垂直居中(四)<br />
目前太阳模式仅用于体验<br />
更多功能敬请关注APP更新
</p>
</div>
</div>
<!-- method-4 -->
<div class="section section-4">
<div class="wrap">
<p class="content">
未知宽度高度的水平垂直居中(四)<br />
目前太阳模式仅用于体验<br />
更多功能敬请关注APP更新
</p>
</div>
</div>
<script type="text/javascript">
(function($){
$.fn.vhAlign = function(){
return this.each(function(i){
//获取元素的内容高度
var h = Math.ceil($(this).height());
//outerHeight=padding+border+height
var oh = Math.ceil($(this).outerHeight());
//取得margin-top值
var mt = Math.ceil(oh / 2);
//取得元素宽度
var w = Math.ceil($(this).width());
//outerWidth=padding+border+width
var ow = Math.ceil($(this).outerWidth());
//取得margin-left
var ml = Math.ceil(ow / 2);
//实现元素居中效果
$(this).css({
"margin-top": "-" + mt + "px",
"top": "50%",
"margin-left": "-" + ml + "px",
"left": "50%",
"width":w,
"height":h,
"position": "absolute"
});
});
};
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".wrap").vhAlign();
});
</script>
</body>
</html>
