div+css层在html页面中垂直居中（2）

最新推荐文章于 2023-09-11 18:44:00 发布
最新推荐文章于 2023-09-11 18:44:00 发布
阅读量134 收藏
点赞数
分类专栏： div+css 文章标签： HTML CSS Firefox XHTML
 前段时间有写过这个话题，今天在来补充一下，以下是支持IE6,IE7和Firefox垂直居中代码。 
<!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=gb2312" />
<title>div层在html页面中垂直居中</title>
</head>
<style>

body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    background:#000;
    display:table;
}

#outer[id] {
   
    display: table;
    position: static;
   
   
    *position:relative;
   
     
    _position: static;
}
#middle {
   
    position: absolute;
    top: 50%;
    left: 0;
    vertical-align:middle;
    display:table-cell;
    width:100%;
   
   
    *vertical-align:middle;
    *display:table-cell;
    *width:100%;
   
   
    _vertical-align:;
    _display:;
    _width:;
}
#middle[id] {
   
    display: table-cell;
    vertical-align: middle;
    position: static;
    top:50%;
    left:0;
    width:100%;
   
   
    *position:absolute;
   
   
    _position: ;
}

#inner {
    position: relative;
    top: -50%;
    margin: 0 auto;
    text-align:center;
}

#content{
    width:500px;
    height:400px;
    border:1px solid red;
    background:#EEE;
    margin: 0 auto;
    text-align:left;
}

</style>
<body>
<div id="outer">
    <div id="middle">
        <div id="inner">
             <div id="content">div层在html页面中垂直居中div层在html页面中垂直居中div层在html页面中垂直居中div层在 html页面中垂直居中div层在html页面中垂直居中</div>
        </div>
    </div>
</div>
</body>
</html>
 
lcxmjk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div水平垂直居中的常用方法
qq_44291675的博客
12-29 4236
常见的div水平垂直居中方案 div水平垂直居中是我们工作中常用需求，而且面试过程中还经常可能会被问道。但是如果没有仔细研究过得同学还真不一定能答的上来。 这里我总结了几种常见的方案，以供大家参考。 1.通过设置绝对定位和设置负边距实现： 思路：通过设置div绝对定位top：50%和left50%定位到距离上边框和左边框一半的位置，然后将div的边距设为负数分别向左和向上移动自身距离的50%，就可...
DIV居中及DIV垂直居中.html
05-16
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
5种div 内容水平垂直居中方法
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
div水平垂直居中的四种方式
qq_57443373的博客
09-08 3万+
让div水平居中的方式，我所知道的就是以下这四种。 文章目录一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d..
如何实现一个div垂直居中（至少3种方法）
最新发布
yf18040578780的博客
09-11 4156
如何实现一个div垂直居中（至少3种方法）
CSS总结div中的内容垂直居中的六种方法
susunjia的博客
07-14 4864
CSS总结div中的内容垂直居中的六种方法
让div在屏幕中居中（水平居中+垂直居中）的几种方法
IT修真院：初学者转行到互联网的聚集地
10-30 5835
让div在屏幕中居中（水平居中+垂直居中）的几种方法 水平居中方法: 1.inline，inline-block元素的水平居中，在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin：0 auto； 绝对定位和margin-left:-(width/2)实现水平居中： 绝对定位+margin:0 auto + ...
DIV+CSS垂直居中一个浮动元素
09-25
在本文中，我们将深入探讨如何在CSS中垂直居中一个浮动元素。 首先，让我们回顾一下常规的块级元素垂直居中方法。对于一个具有固定宽度的块级元素，可以通过设置`margin: auto 0;`来实现水平居中。然而，这种方法不...
div+css垂直居中的五种实现方法
01-19
方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。结构效果如下：CSS 复制代码代码如下:div#wrapper { display: table; width: 500px; height: 500px; background-color: #c00...
使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
div 垂直居中的六种方法
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
【转】div水平垂直居中的六种方法
lerous的专栏
11-17 406
在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。 方法一: 　　绝对定位方法：不确定当前div的宽度和高度，采用transform:translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） 　　图片展示： 　　 　　代码如下： 1 2 3 4 5 6 7 div{ ba...
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
热门推荐
吟游诗人——吟唱生命的不朽
08-11 52万+
最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。 水平居中直接加上&amp;lt;center&amp;gt;标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法 放上示范的html代码：&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;
关于让div元素垂直居中的几种方法
ZhangLN9297的博客
09-17 2万+
如何用让嵌套在里面的div居中 本人是一个前端新手，如何让两个相互嵌套的div，让里面的div居中是一个比较简单的问题，面试也常问，我就从其他博客中提取稍微总结一下（转载侵删），也加了一点自己的困惑和理解，错误的地方希望能有人指出： 利用position：absolute的特性 设置margin为auto display:table-cell transform flex 方法一：利...
div在页面垂直居中方法---增强改进版
weixin_34174422的博客
05-09 164
div在页面垂直居中方法---改进版 .wrap{ background: #ffffff; position:absolute; margin:auto; top: 0; bottom: 0; left:0; right: 0; height: 630px; } 效果图：   在开发中遇到个问题， 当屏幕height小于630...
HTML5 div在界面水平垂直居中
A Bear的博客
06-02 1万+
设置一个div垂直居中，查了一下，有的用获取屏幕宽度和高度，再减去div宽度的一半，就将div居中，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;title&gt;prettify.js&lt;/title&gt;    &lt;meta charset="utf-8"&gt;     &lt;!--    Incl
让DIV层水平垂直居中页面的两种方法
一个前端小菜鸟的博客
11-13 2764
让一个层水平垂直居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。 1、让层水平居中 1 2 3 4 5
让DIV在页面中水平居中，垂直居中（非浮动状态）
hongmy94的博客
10-01 8771
HTML: &lt;div style="width:100px;height:100px;border:1px solid red"&gt;&lt;/div&gt; CSS: 方法一 div{             overflow: auto;             margin: auto;             position: absolute;             ...
div+css布局实例：网页居中、内容垂直居中与层透明度
在现代网页设计中，利用Div+CSS进行网页布局是一种常见的技术，它提供了更多的灵活性和控制力。本文将介绍三个实用的Div+CSS实例，帮助你更好地理解和掌握这种布局技巧。 1. 网页整体居中: 设置网页整体居中的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值