[HTML]<div>标签绝对定位设置内容绝对居中

最新推荐文章于 2023-09-05 09:19:11 发布
最新推荐文章于 2023-09-05 09:19:11 发布
阅读量187 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/cn23317/archive/2009/06/28/absolute_center.html
本文介绍了一种使用CSS实现网页元素在不同分辨率下绝对居中的方法，通过设置特定的margin值和百分比位置，使得指定的div元素无论在何种屏幕尺寸下都能保持水平和垂直方向上的居中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

绝对居中：即在客户端上任何分辨率下纵横方向均居中

涉及知识点：

CSS类、id属性定义
DIV标签绝对定位属性

样例代码：
必需的重点部分由红色标记

<html>
<head>
<title>Nice and Free CSS Template 11</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
/*   body und schrift deffinitionen */
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#inhalt {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}
p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
--></style>
</head>
<body>
<div id="inhalt">
<p><b>centered</b><br /><br />
This area should be horizontally and vertically centered.<br />
This text stays left aligned<br />
<b>ie mac doesn’t like this! </b><br />
<a href="/">more nice and free css templates</a>
</p>
<p>
</div>
</body>
</html>

注意：#inhalt的定义中 height和width值应分别是margin中第一参数、第四参数的两倍，否则不居中。

转载于:https://www.cnblogs.com/cn23317/archive/2009/06/28/absolute_center.html

html div相对位置,div的相对定位与绝对定位
weixin_39524741的博客
06-04 2691
这几个部分都是可以通过CSS进行指定的，当然，CSS还可以控制背景，因此，我们可以通过CSS来灵活控制我们页面的外观。二、CSS中的文档流模型所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然，嵌套不在此列)，每一个块都会另起一行。如下图他们对应的html如下：div1div2div3为了定义他们的宽度、高度还有边框，我们定义如下的CSS：#div1 {border: 1px...
html绝对定位居中
weixin_52563089的博客
08-26 1001
html绝对定位
控制DIV中的文字绝对居中
anwei9164的博客
12-05 289
水平居中：<div align="center">Content</div> 垂直居中：<div style="line-height:30px;height:30px;">Content</div> 两者结合，就可以绝对居中了： <div style="line-height:50p...
html绝对定位怎么页面居中,html – 如何将绝对定位的元素居中？
weixin_28733777的博客
06-05 469
使位置居中的元素：绝对;应用通过使用两个嵌套元素(demo).>第一个元素绝对定位于将其置于所有其他元素之上>第二个元素就像你期望的那样：使用margin：0 auto;以中心为中心.HTML：This is a modal window being centered.CSS：.outer-div {position: absolute;top: 0;right: 0;bottom: ...
html div绝对定位居中
weixin_44442366的博客
01-27 545
<div class="parent-frame" style="position: relative;"> 利用绝对定位，配合translate移动到水平垂直居中。 <div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> </div> </div> ...
html绝对定位怎么页面居中,绝对定位元素设置水平居中
weixin_35936191的博客
06-05 2358
需求：有时页面内的一些容器需要定位在特定的某个位置，但是需要容器在水平方向上面居中显示，比如页面内的一个背景图里面放置一个容器，使用margin-top不方便，就决定使用绝对定位来设置。实现方法：方法一、知道容器尺寸的前提下.element {width: 600px; height: 400px;position: absolute;left: 50%;top: 50%;margin-top: ...
如何在Web开发中使<div>元素内的<p>标签水平居中对齐？
11-17
在Web开发中，如果你想要让`<p>`标签在`<div>`元素内水平居中对齐，你可以通过CSS样式实现这一效果。这里有几个常见的方法： 1. **Flex布局**: 使用CSS Flexbox，可以将包含`<p>`的容器设置为flex容器，并使用`...
<div class="layui-card-body "> <div class="layui-carousel" id="ID-carousel-demo-1"> <div carousel-item> <div><h2>“你的工作将占据你生活的很大一部分，唯一真正满足的方法就是做你认为是伟大工作。” ——— 史蒂夫·乔布斯</h2></div> <div>“成功不是最终的，失败不是致命的，重要的是继续前进的勇气。” ——— 温斯顿·丘吉尔</div> <div>“唯一限制你的是你给自己设定的限制。” ——— 罗伯特·清崎</div> <div>“要么找到方法，要么制造方法。” ——— 非洲谚语</div> <div>“卓越不是一种行为，而是一种习惯。” ——— 亚里士多德</div> <div>“每一天结束时，你应完成比开始时更多的事。” ——— 亨利·福特</div> <div>“如果你想要提升自己，就去帮助别人提升。” ——— 本杰明·富兰克林</div> <div>“效率是把事情做对，效果是做对的事情。” ——— 彼得·德鲁克</div> <div>“最大的风险是不冒任何风险。” ——— 马克·扎克伯格</div> <div>“不要等待机会，而要创造机会。” ——— 乔治·伯纳德·萧</div> </div> </div> </div>怎么设定字体大小和居中显示
03-09
水平居中可以用text-align: center，而垂直居中可能需要使用flex布局或者绝对定位。考虑到轮播项的高度可能固定，使用flex的align-items和justify-content属性会比较方便。 接下来，需要确保自定义的CSS在layui.css...
帮我用<div>标签可个html，设置宽高要可以直接覆盖整个页面
03-12
<think>好的，用户想用<div>标签创建一个覆盖整个浏览器窗口的元素，我需要根据提供的引用内容给出解决方案。首先，引用[2]提到用CSS设置div高度为100%，包括display: block; position: relative; height: 100%。但...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header w"></div> <div class="banner"> <!-- 修正拼写错误 --> <div class="banner w"> <div class="subnav"> <ul> <li><a href="#">图书、童书<span>></span></a></li> <li><a href="#">电子书<span>></span></a></li> <li><a href="#">创意文具<span>></span></a></li> <li><a href="#">服饰、内衣<span>></span></a></li> <li><a href="#">鞋靴<span>></span></a></li> <li><a href="#">运动户外<span>></span></a></li> <li><a href="#">孕、婴、童<span>></span></a></li> <li><a href="#">家具、家电、数码<span>></span></a></li> <li><a href="#">家居、家装、汽车<span>></span></a></li> <li><a href="#">食品、酒类<span>></span></a></li> <li><a href="#">手机、数码、电脑办公<span>></span></a></li> <li><a href="#">家用电器<span>></span></a></li> <li><a href="#">当当礼品卡、生活服务<span>></span></a></li> </ul> </div> </div> <div class="button-container"> <button class="btn">按钮 1</button> <button class="btn">按钮 2</button> <button class="btn">按钮 3</button> </div> </div> </div> </body> </html> 按钮在图片的左下方，图片放在中间的一个盒子
03-13
<think>好的，用户的问题是如何通过CSS和HTML让按钮定位到图片的左下角，同时图片在容器盒子里水平垂直居中。我需要先理解用户的需求，然后思考解决方案。 首先，用户提到了按钮要位于图片的左下角，这意味着按钮...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>校园活动公告</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #51addb; color: white; padding: 1rem; text-align: center; } nav { background-color: #ff7829; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; } nav ul li { padding: 1rem; } nav ul li a { color: white; text-decoration: none; } main { flex: 1; padding: 1rem; } footer { background-color: #51addb; color: white; text-align: center; padding: 1rem; margin-top: auto; } .content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .content article { background-color: #f4f4f4; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; } @media (max-width: 768px) { nav ul { flex-direction: column; align-items: center; } .content { grid-template-columns: 1fr; } } .content article { transition: transform 0.3s ease, background-color 0.3s ease; } .content article:hover { background-color: #e0f7fa; transform: scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .content article { position: relative; perspective: 1000px; height: 200px; background-color: transparent !important; } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transition: all 0.6s ease; padding: 1rem; border-radius: 8px; background-color: #f4f4f4; box-sizing: border-box; } .content article:hover .card-front { transform: rotateY(180deg); } .content article:hover .card-back { transform: rotateY(360deg); } .content article:hover { transform: scale(1.1) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important; background-color: transparent !important; } body { transition: background-color 0.5s ease; } .content:hover { background-color: #e0f7fa; } </style> </head> <body> <header> <h1>校园活动公告</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">活动日历</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> <main> <section class="content"> <article> <div class="card-front"> <h2>校园音乐会</h2> <p><strong>时间：</strong>2025年10月15日 18:00</p> <p><strong>地点：</strong>学校大礼堂</p> <p>欢迎全体师生参加，享受一场音乐盛宴！</p> </div> <div class="card-back"> <p>欢迎全体师生参加，享受一场音乐盛宴！</p> </div> </article> <article> <div class="card-front"> <h2>编程马拉松</h2> <p><strong>时间：</strong>2025年10月20日 09:00</p> <p><strong>地点：</strong>计算机学院实验室</p> <p>与同学们一起挑战编程极限，赢取丰厚奖品！</p> </div> <div class="card-back"> <p>与同学们一起挑战编程极限，赢取丰厚奖品！</p> </div> </article> <article> <div class="card-front"> <h2>校园运动会</h2> <p><strong>时间：</strong>2025年10月25日 08:00</p> <p><strong>地点：</strong>学校操场</p> <p>参与各项运动项目，展现你的运动风采！</p> </div> <div class="card-back"> <p>参与各项运动项目，展现你的运动风采！</p> </div> </article> </section> </main> <footer> <p>© 2025 校园活动中心 | 联系方式：activity@school.edu</p> </footer> </body> </html> 以上代码的运行结果不符合我预期的效果，当鼠标移动至卡片上时翻转一百八十度，但是没有对齐，帮我修改一下
最新发布
08-04
），并且内部有两个绝对定位的div（.card-front和.card-back），它们重叠在一起。 问题分析： 1. 在.card-front和.card-back上，我们设置了绝对定位，并且宽高都是100%，这应该可以覆盖整个父容器。 2. 翻转效果...
html在页面上div绝对定位,html div出现在绝对定位元素之上
weixin_35715402的博客
06-05 424
我有一个父div设置为亲戚。然后我有一个子div定位绝对，它拥有几个嵌套的子div本身。与同一课程。我已经实现了我想要的布局，但是当我离开并在上面提到的部分下面开始一个新的部分/ div时，它的内容显示在上面的div之上。不知道为什么。我希望div 从一个新行开始，而不是干扰它上面的div，这正是发生的事情。我的代码如下所示。TOP SELLING PROTEIN RANGE ...
html div相对位置,CSS 相对|绝对(relative/absolute)定位系列（一）
weixin_32712615的博客
06-04 592
1.绝对定位和浮动元素是近亲：都具备包裹性和破坏性包裹性：包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度破坏性：浮动的破坏性在于切断linebox链，致使高度塌陷，但由于浮动元素仍在凡间(DOMtree)，实体是看得见摸得着的，所以其占据的实体位置还是在的。而abso...
html 相对定位 绝对 定位 css + div
weixin_33941350的博客
02-05 112
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN""http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.worg/1999/xhtml"&gt;    &lt;head&gt;        &lt
HTML定位
weixin_52173610的博客
08-30 6854
在 HTML 中，可以使用 CSS 来对元素进行定位。常见的定位方式有相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，和粘性定位(sticky)。- 相对定位(relative)：元素相对于其正常位置进行定位，通过 top、bottom、left、right 属性来指定偏移量。- 绝对定位(absolute)：元素相对于其最近的已定位祖先元素(非 static 定位)进行定位，或者相对于文档的初始坐标定位。
html 居中几种方式
qq_52807600的博客
09-05 1186
css居中的几个方式
html 绝对布局 居中,CSS之居中布局的实现方法
weixin_32047681的博客
06-19 460
在前端开发中，我们经常会遇到各种上不同场景的关于居中的布局，一般水平居中是相对简单，而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。水平居中水平居中相对于其它几中居中排列要简单的多，按标签元素可分为行内元素与块级元素居中：1、行内元素如：a img span em b small 此类标签元素及文本.center { text-align: center; }2、块级元...
html中如何写div中div的位置,DIV CSS绝对定位布局案例 position布局实例
weixin_29185493的博客
05-30 1527
DIVCSS5为大家实例讲解绝对定位布局。绝对定位我们要用到样式position:absolute和position:relative，同时需要top、bottom、left、right配合布局实现DIV绝对定位。通过真实案例演示与介绍绝对定位布局方法技术。Css div绝对定位案例截图遇到以上的不规则案例布局，如果使用float、padding等浮动实现比较麻烦，但使用position绝对定位即...
CSS+HTML实现元素定位
二哈喇子！
07-06 2419
相对定位、决定定位、固定定位、z-index样式、数量角标、遮盖效果、返回顶部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值