符合标准绝对垂直居中

最新推荐文章于 2024-08-13 10:14:20 发布
最新推荐文章于 2024-08-13 10:14:20 发布
阅读量493 收藏
点赞数
分类专栏： css+div 文章标签： safari opera div border ie xhtml
<!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>完美的水平垂直居中！！--兼容ie6，ie7，ff，opera，safari的水平垂直居中</title>
<style media="screen" type="text/css">
.wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;}
.holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}
.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}
.holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;}
/*
分两套看
holder的 display:table
holder div的 display:table-cell; vertical-align:middle;
就可以实现在ff，safari和opera下的垂直居中，但是对ie系列无效
holder的 position:relative;
holder div的 *position:absolute;  top:50%; left:0;
.holder p的 position: relative;  top:-50%;
通过控制绝对层的位置实现ie6，7下的垂直居中
holder div中的*position:absolute是只给ie6和7看的css hack
对于水平居中要说的是如果holder div的width如果未指明100%，在ie7中它是不会自动延伸100%的，也就无法实现水平居中
*/
</style>
</head>
<body>
<div class="wrapper">
<div class="holder">
<div><p><img src="/images/logo.gif" /></p></div>
</div>
<div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;">
以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试</div>
</div>
</body>
</html>
zky0901
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
绝对定位水平垂直居中
小阿兜的博客
05-29 2269
<style> .box { position: absolute; /* 1. left 走 50% 父容器宽度的一半 */ left: 50%; /* 2. margin 负值 往左边走 自己盒子宽度的一半 */ margin-left: -100px; top: 50%; margin-top: -100.
垂直居中
qq_43218276的博客
03-09 280
垂直居中布局1.文本/行内元素/行内块级元素：2.图片元素垂直居中：3.单个块级元素：3.1使用table-cell实现：3.2使用绝对定位3.3使用flex实现： 1.文本/行内元素/行内块级元素： 原理：line-height与height值相等 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VYRJYgaR-1615303152625)(./1615198577100.png)] 2.图片元素垂直居中： 原理：vertical-align和line-height的
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
LuckySummer*
05-10 3237
目录(?)[+] 转载地址： http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS:
Absolute 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
luckychen81的博客
05-14 3968
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 我不是这种实现方法的第一人，可能这只是非常常见的一种小技术，我斗胆将其
css 水平居中，垂直居中，自适应宽度的代码
09-25
### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的元素水平居中 在Web开发中，使元素能够根据内容的多少自动调整宽度，并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果...
ASP.NET 绝对居中弹出层
10-27
此外，通过设置`position: absolute`和`margin: auto`，我们可以实现弹出层在父容器中的水平和垂直居中。 3. **ASP.NET Controls**：ASP.NET提供了一系列内置控件，如Panel或ModalPopupExtender，这些可以帮助我们...
css实现文字居中两边横线效果的示例代码
12-13
最后，我们设置了`.title`元素的高度`height: 50px`和行高`line-height: 50px`，使其与横线匹配，同时保持文本垂直居中。`width: 800px`和`margin: 200px auto`确保了元素在页面中居中显示，`width`可以根据实际内容...
CSS实现带倒三角标记的WEB标准菜单效果代码
12-09
2. `#menu li`设置了列表项的宽度，使其浮动在左侧，并设置行高，以保持元素垂直居中。 3. `#menu a`定义了链接的基本样式，包括相对定位、无下划线装饰、背景颜色、宽度和文本对齐方式。`display:block`使得链接...
公文格式标准页面设置.doc
10-11
- 图片位置设置为衬于文字下方，水平居中，垂直绝对位置在0.4厘米处。 6. 版记制作： - 使用表格插入版记，表格居中，文字环绕，定位在页面底部居中。 - 首条和末条分隔线宽度2或3磅，其他线取消。 - 抄送、...
safari扩展程序开发
xyc1211的博客
08-13 611
safari的extension文档不是很好，建议参考mozilla文档。
XHTML 简介
lly202406的博客
08-09 424
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
新型智慧城市项目技术方案（2283页）.pdf
08-16
新型智慧城市项目技术方案（2283页）
openssh windows安装程序
08-16
openssh windows安装程序
java-团员管理系统（源码+数据库+论文）.rar
08-16
共青团员做为我们先进积极分子的培养对象，是未来党人和民的重点培养对象。但随着知识和认识的不断提高，越来越多的青少年选择积极入团，由此而引发的团员管理也成为当下需要解决的问题。日益成熟的互联网技术大大推动了共青团信息化建设的发展，此次毕业设计就是要通过技术的手段来实现团员的信息化管理。 那么业务实现就是为了实现共青团团员的管理系统，那么技术上我们采用的手段还是以目前主流的Java技术为主，那么采用的框架是SSM框架，这样一来更加方便的进行一个团员信息的管理。数据库方面我们使用的是MYSQL数据库，可以有效的快速上手，容易我们开发。 关键词：SSM框架；信息技术；团员管理；
vb+access高校固定资产管理系统(论文+程序).zip
08-16
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
Linux基础篇系列一：安装VMWare
最新发布
08-16
Linux基础篇系列一：安装VMWare
Tableau-用铅笔柱形图对比数据
08-16
资源内包含Tableau的twbx模板文件，有需要的小伙伴可以自行下载使用，如需查看视频讲解可以访问西瓜视频：https://www.ixigua.com/home/2506516376848260/video/?preActiveKey=pseries&list_entrance=userdetail 或者哔哩哔哩：https://space.bilibili.com/630399480?spm_id_from=333.1007.0.0
算法高阶day07+day08代码.zip
08-16
算法高阶day07+day08代码.zip
绝对定位 垂直居中
05-30
要实现绝对定位的元素在父元素中垂直居中，可以使用以下方法： 1. 父元素需要设置 position: relative; 2. 绝对定位的元素需要设置 top: 50%; transform: translateY(-50%); 3. 如果需要水平居中，可以再设置 left: 50%; transform: translate(-50%, -50%); 例如，HTML代码如下： ``` <div class="parent"> <div class="child">绝对定位的元素</div> </div> ``` CSS代码如下： ``` .parent { position: relative; height: 200px; background-color: #eee; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这样，就可以实现绝对定位的元素在父元素中垂直居中了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值