网页垂直居中

最新推荐文章于 2023-12-08 15:21:58 发布
最新推荐文章于 2023-12-08 15:21:58 发布
阅读量213 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcrenl/article/details/40343187
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
.kkkk {
background-color: #CCCCCC;

}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>

<body>

    <table width="100%" border="1" cellpadding="0" cellspacing="0" class="kkkk" id="mainDiv">
      <tr>
        <td align="center" valign="middle"><table width="200" border="1" cellspacing="0" cellpadding="0">
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table></td>
      </tr>
    </table>

<script type="text/javascript" language="javascript">
function OnResize()
{
window.document.getElementByIdx("mainDiv").style.height=document.documentElement.clientHeight + "px";
}
OnResize();
window.onresize = OnResize;
</script>
</body>
</html>

dcrenl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS网页布局：div垂直居中的各种方法
12-10
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。 在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>
CSS实现垂直居中
weitd的专栏
05-10 334
关键字:居中,CSS,方法 描述:使用CSS实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 H3方法一/H3 这个方法把一些div的显示方式设置为表格，因此我们 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 方法一 ...
五种方法实现css垂直居中
lini_thinkpad的专栏
07-13 291
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看
页面垂直居中实现方法（HTML/CSS）
TdMaster的博客
10-02 2438
Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。您可以根据具体的需求和兼容性考虑选择其中的一种方法来实现您的网页布局。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。元素的高度设置为100%，这是为了让页面占据整个视口的高度。元素的高度设置为100%，并将它们的定位设置为相对定位。元素的高度设置为100%，并将它们的显示属性设置为表格布局。另一种方法是使用表格布局来实现页面的垂直居中。，我们将内容区域的左上角定位在父元素的中心点。
html div页面上下居中代码,关于html：将页面上的div垂直居中
weixin_39985286的博客
06-03 149
我知道垂直对齐是棘手的，并且在stackoverflow上有很多关于它的问题...我一直试图解决这个问题几个小时，但没有成功，所以决定问一下(抱歉，如果重复的话)我已经为我的网站创建了一个登录页面。主体中有2个主要div，一个用于徽标，一个用于登录内容。 登录内容有2个部分，一个部分用于电子邮件和密码，另一个部分用于社交媒体登录。My Logo goes here有没有办法始终使登录div垂直居中...
网页布局 CSS简单实现垂直居中
09-27
英文原文：http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/中文译文：http://www.12sui.cn/blog/71.html本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍...
网页图片垂直居中
08-16
在网页设计中，让图片或其他元素垂直居中是一项常见的需求，尤其在响应式设计和现代网页布局中尤为重要。本文将详细介绍如何实现网页图片的垂直居中，并提供多种方法供参考。 1. **CSS Flexbox** Flexbox是CSS3中的...
网页制作中的水平居中和垂直居中解决方法集合
12-07
你自己在做自己的网页的时候或许可以保证在视觉上是居中的，但是如果让这个元素或者他的父元素变大了，你还能保证居中吗？ 　vertical-align是个不错的属性，但是这个属性起初是针对表格的cell的。当然这个属性虽然...
使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
教你如何用纯CSS代码实现垂直居中
Mr.小灰狼_随笔
07-05 2797
教你如何用纯CSS代码实现垂直居中 在编辑一个页面时，通常用到 水平居中 和 垂直居中， 而水平居中很好处理，不外乎就是 设定 margin: 0 auto; 或是 text-align: center; 就能轻松解决掉水平居中的问题，但一直以来最麻烦的对齐问题， 都是 “垂直居中” 这个讨人厌的设定， 以下将介绍五种单纯利用 CSS 来实现 目录 方法1：设定行高 ( line-height ) 方法2：绝对定位 方法3：利用 transform 方法4：使用表格或假装表格 方法5：使用 Flexbox.
DIV未知高度的垂直居中代码.rar
07-05
介绍： 测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。 作者：forestgan
html垂直水平居中代码,CSS实现水平垂直居中的几种方法
weixin_39648824的博客
06-07 339
本篇文章给大家介绍CSS实现水平垂直居中的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。水平居中最常用的就是text-align:center; 和 margin:0 auto; 其中text-align:center;是对内部子元素(inline/inline-block)起作用，而margin:0 auto;是对元素自身(block)起作用，具体根据自己的需要适当地...
Html+CSS垂直居中的N种方法(大全)
weixin_46824709的博客
07-09 9099
利用元素 position: absolute 和 margin: auto实现垂直居中，适用于父子盒子里。 代码： 利用绝对定位百分比 50% 来实现，然后再用负的 margin-top 和 margin-left 来进行简单的位移即可。适用于父子盒子里。 代码： 使用 CSS3 的一个计算函数来进行计算即可；方法与上面类似。适用于父子盒子里。 了解calc的用法具体参考：CSS calc()函数的用法 代码： 利用 CSS3 的新特性 transform；因为 transform 的 translate
html垂直居中方案及示例
weixin_40457514的博客
06-27 6579
垂直居中方案整理及示例代码
CSS中实现元素水平居中、垂直居中的6个方法（详解）
热门推荐
xtcbql的博客
09-30 2万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
CSS实现水平垂直居中的几种方法
最新发布
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
12-08 1122
作者：🤶马可家的菠萝在我们日常开发中，会经常涉及到元素水平和垂直居中的需求，而元素水平和垂直居中是实现美观布局的重要手段。本文将介绍几种常见的实现水平和垂直居中的方法，并分析各自的优缺点，帮助大家更好地掌握这一技能。元素示例综上所述，Flex布局和Grid布局在现代浏览器中表现优秀，是更推荐的选择。而行内元素方式、绝对定位+margin:auto方式、绝对定位（已知宽高）方式和Table布局方式在特定情况下可能适用。绝对定位（未知宽高）方式在实际应用中较少使用。
html实现水平垂直居中,HTML技巧篇：实现元素水平与垂直居中的几种方式
weixin_27015733的博客
06-15 2万+
如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。1)单行文本的居中主要实现css代码：水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短...
html水平垂直居中
W2279567793的博客
04-14 1万+
居中对齐的集中几种方式
HTML元素的水平/垂直居中方式（简单代码和图）
qq_48680890的博客
09-08 1万+
1.水平居中text-align：center; 在没有浮动的情况下，我们可以让需要居中的块级元素设为inline/inline-block，然后在其父元素上添加text-aline:center;即可。如果想要居中的块级元素是内联元素（span，img，a等），直接在其父元素上添加text-align：center；即可。 .father{ width: 200px; height: 200px; background-color: aqua; tex...
如何设置网页垂直方向居中
05-25
可以使用以下CSS样式来实现网页垂直方向居中： ``` html, body { height: 100%; } body { display: flex; align-items: center; } ``` 这里使用了flex布局，将body元素设置为flex容器，并通过align-items属性将其子元素垂直居中。同时，为了让整个网页占据100%的高度，需要将html和body元素的高度都设置为100%。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值