position:absolute水平居中的三种方法
position:absolute水平居中的三种方法
方法一（推荐）、是将 potition:absolute 元素的 left 和 right 同时设置为 0，并且设置 margin:0 auto 。代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
position:absolute水平居中的三种方法
方法一（推荐）、是将 potition:absolute 元素的 left 和 right 同时设置为 0，并且设置 margin:0 auto 。
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position:absolute水平居中方法一</title>
</head>
<style>
#root{
width: 100%;
height: 100px;
position: relative;
background: #eee;
}
.block{
height: 40px;
width: 200px;
position: absolute;
left: 0;
right:0;
margin: 0 auto;
background: #555;
}
</style>
<body>
<div id="root">
<div class="block">www.02405</div>
</div>
</body>
</html>方法二、将 potition:absolute 元素 的 left 设置为 50%，margin-left 设置为负的父元素的宽度的一半，也就是 -width/2 ，这个的缺点是要知道父元素的确切宽度。
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position:absolute水平居中方法二</title>
</head>
<style>
#root{
width: 960px;
height: 100px;
position: relative;
background: #eee;
}
.block{
height: 40px;
width: 200px;
position: absolute;
left: 50%;
margin-left: -480px;
background: #555;
}
</style>
<body>
<div id="root">
<div class="block">www.02405</div>
</div>
</body>
</html>方法三、在 potition:absolute 元素外部套一层 div，对这个 div 设置绝对定位，然后再设置里面的元素 margin:0 auto。
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position:absolute水平居中方法三</title>
</head>
<style>
#root{
width: 100%;
height: 100px;
position: relative;
}
.container{
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 40px;
}
.block{
height: 20px;
width: 0px;
position: relative;
margin: 0 auto;
}
</style>
<body>
<div id="root">
<div class="container">
<div class="block">www.02405</div>
</div>
</div>
</body>
</html>#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-22 22:20:09
| 留言与评论（共有 20 条评论） |
| 本站网友 爱的废墟 | 0秒前 发表 |
| 这个的缺点是要知道父元素的确切宽度 | |
| 本站网友 芜湖团购 | 2分钟前 发表 |
| 代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position | |
| 本站网友 24小时纸黄金 | 21分钟前 发表 |
| absolute; left | |
| 本站网友 5678bo | 2分钟前 发表 |
| relative; background | |
| 本站网友 平乐园小区 | 2分钟前 发表 |
| absolute; left | |
| 本站网友 wwdc大会 | 20分钟前 发表 |
| 100px; position | |
| 本站网友 大学毕业生求职网 | 13分钟前 发表 |
| 是将 potition | |
| 本站网友 黄瓜面膜 | 21分钟前 发表 |
| absolute水平居中方法二</title> </head> <style> #root{ width | |
| 本站网友 熊猫人坐骑在哪买 | 27分钟前 发表 |
| 0 auto; background | |
| 本站网友 婴儿湿疹治疗 | 2分钟前 发表 |
| 并且设置 margin | |
| 本站网友 共享服务 | 4分钟前 发表 |
| absolute 元素 的 left 设置为 50% | |
| 本站网友 阿凡达幼崽 | 2分钟前 发表 |
| margin-left 设置为负的父元素的宽度的一半 | |
| 本站网友 win8主题下载 | 21分钟前 发表 |
| 也就是 -width/2 | |
| 本站网友 是男人就强吻 | 21分钟前 发表 |
| margin-left 设置为负的父元素的宽度的一半 | |
| 本站网友 巴戟天的作用与功效 | 2分钟前 发表 |
| 0 auto; background | |
| 本站网友 上海狐臭医院排名 | 23分钟前 发表 |
| auto; position | |
| 本站网友 怎么去雀斑 | 15分钟前 发表 |
| 0; margin | |
| 本站网友 kimi夺冠 | 29分钟前 发表 |
| absolute水平居中的三种方法 方法一（推荐） | |
| 本站网友 半山半岛 | 25分钟前 发表 |
| 200px; position | |