居中

時間 2020-08-11

標籤居中简体版

原文原文鏈接

大體有4種方法實現：
1、table佈局(display:table)
2、絕對佈局（position:absolute）+translate
3、轉化爲行內標籤display:inline-block，藉助另一個標籤高度來實現
4、經過js的獲取標籤的寬高來控制位置，得在元素加載完成後調用js
確定還有其餘方法能夠實現，我目前就發現這幾種，比較推薦第二種和第四種。

示例代碼：javascript

<!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>

<div class="section section-1">
<div class="table">
<div class="tablecell">
<h1>未知寬度高度的水平垂直居中(一)</h1>
<p class="content">
目前太陽模式僅用於體驗<br />
更多功能敬請關注APP更新
</p>
</div>
</div>
</div>

<div class="section section-2">
<div class="middle">
<h1>未知寬度高度的水平垂直居中(二)</h1>
<p>
目前太陽模式僅用於體驗<br />
更多功能敬請關注APP更新
</p>
</div>
<div id="extra"></div>
</div>

<div class="section section-3">
<div class="wrap">
<p class="content">
未知寬度高度的水平垂直居中(四)<br />
目前太陽模式僅用於體驗<br />
更多功能敬請關注APP更新
</p>
</div>
</div>

<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>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。