页面垂直居中的两种方法
方法一：采用表格[IE]
<HTML>
<HEAD>
<BODY>
<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD ALIGN="center" VALIGN="middle">
要居中的内容！
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
方法二：采用frameset[NN4+,IE4+]
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
var url = '你的页面.htm';
function centerFrame (url, width, height) {
if (top == window) {
var w = window.innerWidth ? window.innerWidth :
document.body.clientWidth;
var h = window.innerHeight ? window.innerHeight :
document.body.clientHeight;
var w0 = Math.floor((w - width) / 2);
var h0 = Math.floor((h - height) / 2);
var html = '';
html += '<FRAMESET border=0 ROWS="' + h0 + ', ' + height + ', ' + h0 + '">';
html += '<FRAME SRC="about:blank">';
html += '<FRAMESET COLS="' + w0 + ', ' + width + ', ' + w0 + '">';
html += '<FRAME SRC="about:blank">';
html += '<FRAME NAME="main" SRC="' + url + '" SCROLLING="auto">';
html += '<FRAME SRC="about:blank">';
html += '<\/FRAMESET>';
html += '<FRAME SRC="about:blank">';
html += '<\/FRAMESET>';
document.open();
document.write(html);
document.close();
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="centerFrame(url, 400, 400);">
<!-- 400,400是你页面内容的尺寸 -->
欢迎浏览！
</BODY>
</HTML>
分享到：
相关推荐
在网页设计中，让图片或其他元素垂直居中是一项常见的需求，尤其在响应式设计和现代网页布局中尤为重要。本文将详细介绍如何实现网页图片的垂直居中，并提供多种方法供参考。 1. **CSS Flexbox** Flexbox是CSS3中的...
下面是两种方法的实现： 1. **Flexbox布局**： - 首先，将div的display属性设置为`flex`，创建一个弹性容器。 - 接着，使用`align-items: center;`和`justify-content: center;`使子元素（即图片）在主轴（水平）...
对于垂直居中，Bootstrap本身没有提供内置的解决方案，但我们可以通过以下几种方法来实现： 1. 使用Flexbox：Bootstrap4开始支持Flexbox，可以为父容器添加`d-flex`, `align-items-center`类，这将在所有支持...
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位，使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...
垂直居中分为两种主要情况：内外元素高度全定和外层元素高度定，内层高度不定。 1. **内外元素高度全部确定的情况** - **line-height 与 height 值设相同**：这是最简单的方法，适用于单行文本。通过将元素的`...
下面将详细介绍两种主要的解决方案：文本垂直居中和块级元素垂直居中。 首先，我们来讨论文本垂直居中。在HTML中，文本通常是行内元素，如`<span>`或`<p>`。要实现文本的垂直居中，可以使用CSS的`line-height`属性...
本文将详细讲解在网页中实现元素居中的六种方法，并针对不同的浏览器环境，包括Internet Explorer (IE) 和 Mozilla Firefox，提供具体的应用示例。 1. **CSS Flexbox 居中** Flexbox 是一种现代的布局模式，适用于...
在网页设计中，内容自适应垂直居中是一种常见的布局需求，尤其在响应式设计中更为重要。这个压缩包“内容自适应垂直居中源码”包含了一个名为“内容自适应垂直居中.html”的文件，很可能是为了展示如何实现这一功能...
在网页设计中，让元素在页面上垂直居中是一项常见的需求。对于`div`元素，尤其是包含单行或多行文本的情况，有多种方法可以实现垂直居中。以下将详细介绍几种常见的方式： 1. **单行垂直居中** 对于只有一行文字...
本文介绍了两种实用的方法来实现这一目标，这两种方法分别基于传统的CSS布局技术以及CSS3中的transform属性。 第一种方法利用负的margin值来实现。这种技术要求你已知子元素的尺寸，因为需要将子元素先通过设置top...
下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img...
尽管它们在布局上具有不同的默认行为，但垂直居中的方法在这两种元素上可以通用。 在解释方法之前，我们先澄清一个常见的误区：垂直居中并不依赖于vertical-align属性的默认值。vertical-align的默认值是baseline，...
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
要解决行内块元素的垂直居中问题，我们可以尝试以下几种方法： 1. 使用 Flexbox 布局：Flexbox 是一种现代的布局模式，非常适合处理复杂的对齐问题。只需将父容器设置为 `display: flex`，然后添加 `align-items: ...
总结一下，本文提供了一种针对Firefox浏览器input按钮内文字垂直居中问题的解决方案。通过CSS伪元素::-moz-focus-inner，我们可以覆盖Firefox的默认样式，进而实现文字的垂直居中。这个知识点对于前端开发者在不同...
为了实现HTML页面的水平居中，可以使用以下几种方法： ##### 1. 使用`margin`属性 - **原理**：通过设置元素的`margin-left`和`margin-right`为`auto`，可以让浏览器自动计算左右边距，从而实现水平居中。 - **...
本文将详细解释如何实现这两种情况下的文字垂直居中。 首先，对于单行文字而言，实现垂直居中相对简单。主要方法是调整DIV的高度与其行高（line-height）保持一致。行高（line-height）指的是在同一行文字中，文字...
在Web前端开发中，CSS（层叠样式表）是用于控制网页...随着现代浏览器对Flexbox和Grid布局的支持越来越广泛，这两种方法已经成为首选的居中解决方案。了解并熟练运用这些技巧，将有助于提升页面设计的灵活性和响应性。
在给定的文件中，提到了两种实现CSS水平垂直居中的方法，接下来将详细介绍这两种方法的知识点。 首先，第一种方法适用于固定大小的div元素实现水平垂直居中，无论浏览器窗口如何变化，该div始终居中显示。具体操作...