表格可以实现td中的元素垂直居中显示，但是前提条件必须定义td的高才可行。
但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。
问题：
实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。
解决方案：
1.浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。
(bodyHeight – divHeight)/2
2.浏览器可视区域如果小于元素的高度，即元素距离浏览器可视区域顶部的距离为零。
3.onresize()当浏览器的尺寸改变的时候触发事件。使用onresize()每次改变的时候，重新计算一下元素到顶部的距离。
<html>
<title>让html div元素随浏览器的大小自适应垂直居中</title>
<body>
<div id="dairyBox">
test001<br>
test002<br>
test003<br>
test004<br>
test005<br>
test006<br>
test007<br>
test008<br>
</div>
<script type="text/javascript">
function divMiddle(){
var dairyBox = document.getElementById('dairyBox');
var divHeight = dairyBox.offsetHeight;
var bodyHeight = document.body.offsetHeight;
if(bodyHeight > divHeight){
var endHeight = parseInt(bodyHeight - divHeight)/2;
dairyBox.style.marginTop = endHeight + "px";
}else{
dairyBox.style.marginTop = 0;
dairyBox.style.top = 0;
}
}
if(document.all){
window.attachEvent('onload',divMiddle);
}else{
window.addEventListener('load',divMiddle,false);
}
var resizeTimer = null;
window.onresize = function(){
resizeTimer = resizeTimer?null:setTimeout(divMiddle,0);
}
</script>
</body>
</html>
运行效果：
注意：
根据浏览器的不同onresize被触发的次数都不相同，因此处理的时候要格外小心。
相关推荐
但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。 问题： 实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。 解决方案： 1、浏览器可视区域的高度-元素的高度/2 = 元素...
在创建H5页面时，我们常常需要实现登录框等组件在不同屏幕尺寸下的自适应水平居中和垂直居中。在标题和描述中提到的问题，即在使用Bootstrap时，登录框无法自动在视觉中心对齐，这通常是因为Bootstrap的栅格系统和...
例如，垂直居中和水平居中可以分别使用Grid和Flexbox来实现。 在提供的`demo.html`文件中，可能包含了这些居中布局的示例代码。`logo.png`可能是用来测试这些布局效果的图片。通过查看和分析这些文件，可以进一步...
// 计算图片顶部的外边距，以实现垂直居中 marginHeight = (maxWidth - newHeight) / 2; // 设置图片的CSS样式 $('#' + id).css("margin-top", marginHeight); } // 初始化函数，调用formatSize函数 $...
`可以使容器内的子元素水平和垂直居中。 - 使用CSS Grid，设置`grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));`和`place-items: center;`可以实现类似的效果。 - 传统方法：设置`position:...
**总结**: 通过使用Flexbox布局，我们可以非常方便地实现元素的垂直居中，而且这种方法兼容现代浏览器。 #### 三、自适应宽度与布局技巧 自适应宽度的实现不仅限于水平居中，还涉及到其他方面，比如响应式设计。...
在网页设计中，让未知尺寸的图片在容器中水平和垂直居中是一项常见的需求。这涉及到CSS布局和响应式设计的技巧。以下将详细介绍如何实现这一目标。 首先，我们需要理解CSS中的盒模型和定位概念。在CSS中，元素的...
【CSS实现div表格垂直居中】 在网页设计中，CSS（层叠样式表）是控制页面元素布局和样式的工具。垂直居中是常见的需求，尤其在制作响应式网页时，让内容无论在哪种屏幕尺寸下都能保持居中显得尤为重要。本文将介绍几...
本话题主要探讨如何使用div和CSS技术来实现多行文本的垂直居中，并且使高度能够自适应内容的变化。 首先，我们来看一个基本的HTML结构，它包含一个div容器，里面有多行文字： ```html <div class="container"> 这...
在网页设计中，图片自适应大小是一个常见的需求，特别是在响应式布局中，为了确保不同设备和屏幕尺寸下的视觉效果，我们需要让图片能够根据其容器（如div）的大小自动调整。本文将详细介绍如何使用纯JavaScript实现...
此处的自适应居中，指div能够在其父容器内水平及垂直方向上都保持居中，并且能够根据浏览器窗口大小的改变自动调整自身位置和大小，达到响应式的效果。 知识点详解如下： 1. **纯CSS布局的优势**： 纯CSS布局相比...
利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片...
在网页布局中，将一个DIV元素在其父容器中水平垂直居中是一个常见需求。本文介绍了两种实用的方法来实现这一目标，这两种方法分别基于传统的CSS布局技术以及CSS3中的transform属性。 第一种方法利用负的margin值来...
在CSS布局设计中，使元素水平垂直居中是一项常见的需求。本文将详细解析两种主流的实现方法，并通过实例代码进行演示。 首先，我们来看第一种方法：使用`flexbox`(弹性盒模型)布局。Flexbox是CSS3引入的一种布局...
本文将详细介绍如何利用CSS属性实现一个能够完美自适应屏幕大小变化、动态上下左右居中的`<div>`元素。 #### 一、概念理解 在开始之前，我们需要了解几个关键概念： - **自适应**：即页面元素能够根据不同的设备...
对于一个div实现垂直居中，可以使用`vertical-align: middle;`和`line-height`技巧。设置`line-height`与div的高度相同，然后将内容放置其中，内容就会垂直居中。但要注意这种方法不适用于多行文本。 3. **margin...
2. `Flexbox（弹性盒布局）`：提供了一种更加灵活的布局方式，可以轻松实现水平居中、垂直居中、自适应等效果。 3. `Grid布局`：为二维布局提供强大支持，使得创建复杂的网格布局变得简单。 4. `伪类和伪元素`：如`:...
2. 垂直居中可通过设置`line-height`和`vertical-align: middle`；水平居中则使用`margin: 0 auto`。 3. 如果希望a标签内的内容具有样式，可以设置`display: block`。 4. FF和IE对盒模型的理解差异可能导致2px的偏差...
【CSS+Div浏览器兼容技巧详解】 CSS+Div布局在网页设计中被广泛应用，但在不同的浏览器之间，尤其是Internet Explorer（IE）和Firefox之间，存在诸多兼容性问题。掌握这些技巧可以帮助开发者更好地解决这些问题，...