未知宽高元素的水平垂直居中
大致有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>
?
轉載于:https://www.cnblogs.com/baoshuyan66/p/4923705.html
總結
以上是生活随笔為你收集整理的未知宽高元素的水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蓝桥杯 之 基础练习10：十进制转十六进
- 下一篇： 四叶草启动引导配置工具 ！Clover