未知宽高元素的水平垂直居中

大致有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>

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

转载于:https://www.cnblogs.com/baoshuyan66/p/4923705.html

未知宽高元素的水平垂直居中相关推荐

CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素( ...
如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中第一个方法:我们使用定位给父元素positon:relative,定位到中间 div{ position:absolute; top: 50%; left: 50 ...
不定宽高的div水平垂直居中
使用绝对定位和translate 1 原理:位移取值为百分比数值,参照盒子自身尺寸计算移动距离 2 核心代码 position:absolute;//子绝父相 left:50%; top:50%; t ...
已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐
一.已知宽高的浮动元素水平垂直居中对齐效果: 样式CSS: 1 <style> 2 .parent{ 3 position:relative; 4 border:2px solid #0 ...
图片 + 未知宽高 + 垂直居中
图片 + 未知宽高 + 垂直居中第一种: table-cell / inline-block + vertical-align 条件: 容器宽高受图片默认宽高影响 html结构: <div&g ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
HTML+CSS之设置元素的水平垂直居中
本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中. 1.弹性布局(不换行) justify-content:center:水平居中 align-items:center:垂直居中 .fath ...
宽高不定div水平、垂直居中
宽高不确定div居中宽高不定的div水平垂直居中在前端页面布局中经常用到,它能够根据当前页面的大小做到自适应,使页面展示更协调:由于比较重要,因此在前端面试的时候此知识点会经常被问到. 水平垂直居中 ...
不定宽高的div水平、垂直居中问题
HTML代码如下: <div id="box"><div id="content"></div> </div> ...

未知宽高元素的水平垂直居中

未知宽高元素的水平垂直居中相关推荐

最新文章

热门文章