绝对定位的盒子居中

最新推荐文章于 2024-06-03 10:56:02 发布
最新推荐文章于 2024-06-03 10:56:02 发布
阅读量518 收藏 12
点赞数 10
文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80122749/article/details/135746026
版权
具体做法：

1. left: 50%;：让**盒子的左侧移动到父级元素的水平中心位置；

2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

注意:

加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            /* 1.left走50% 父容器宽度的一半 */
            /* 2.margin 负值往左走自己盒子的一半 */
            left: 50%;
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

2301_80122749
关注
html-定位实现盒子的水平绝对居中的3种方式--小技巧
JackieDYH的博客
02-19 5210
方法一：margin负间距 必须知道居中盒的宽度和高度； 为居中盒设置绝对定位； 距离定位父级左边框和上边框的距离设置为50%； 将元素分别左移和上移，移动元素宽度和高度的一半 方法二：margin: auto；实现绝对定位元素的居中 必须知道居中盒的宽度和高度； 为居中盒设置绝对定位； 分别设置left: 0; right: 0; top: 0; bottom: 0; 为居中盒设置ma...
Web开发中盒子居中的几种方法
09-22
Web开发中盒子居中的几种方法包括： 1. margin固定宽高居中：这种方法需要事先知道盒子的宽高，通过设置父容器的水平自动外边距（margin: auto）来实现水平居中，垂直居中则需要调整子盒子的margin值。代码示例中，...
使用绝对定位实现居中的两种方法
ZQY1436556395的博客
05-21 2万+
方法一：1.左右居中（绝对定位） 先给父元素开启相对定位，再给子元素开启绝对定位，然后将子元素向左移动自己的50%，使子元素的中点与父元素的起点对齐，然后再将子元素向右移动父元素的50%，这样子元素和父元素的中心点就刚好重合了 <style> .box1{ width: 1000px; height: 50px; background-color: pink; position: relative; } .box2{ wid
【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-12 7445
一、问题提出 二、绝对定位 居中设置 1、设置固定尺寸 2、先偏移50%再回退固定值 三、绝对定位元素 水平 / 垂直 居中
绝对定位position:absolute；实现居中对齐
热门推荐
LzzMandy的博客
12-07 3万+
position:absolute；元素定位的起点，可参考下图： 要实现居中显示，如下效果： 源码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;练习的地方&lt;/title&gt; &lt;style&gt;
让绝对定位的元素，实现居中的三种办法
tianfangf的博客
02-13 1万+
一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是：1，先向右，向下移动百分之50，然后在利用margin减去自身宽度的一半（这个一定不能忘了减去哦，负值） .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; marg...
绝对定位下的居中对齐
lqy455949477的博客
09-14 745
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
实现一个盒子水平居中的三种方法.html
03-29
前端——基础css学习
盒子上下左右居中设置
12-25
3. **绝对定位**：对于不考虑旧浏览器兼容性的场景，可以使用绝对定位。设置父容器为相对定位`position: relative;`，子元素为绝对定位`position: absolute;`，并设置`top: 50%; left: 50%; transform: translate(-...
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
css中position:fixed实现div居中上下左右居中
09-25
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
css中常用的几种居中方法(推荐)
09-24
利用绝对定位（position: absolute）和负边距（margin-left, margin-top）是一种常见的居中方法。首先，将元素设置为绝对定位，然后将其水平和垂直方向都移动到50%，接着通过设置负的margin值将元素回移一半自身的...
固定宽度 高度的页面在不同分辨率的屏幕上垂直 水平居中
09-25
1. 使用绝对定位配合负边距实现居中： - 设置页面中需要居中的元素（例如一个div）的`position`属性为`absolute`，这样元素就可以脱离正常的文档流，便于进行定位。 - 将元素的`left`和`top`属性设置为`50%`，使得...
css屏幕居中的方法(推荐)
09-25
对于简单的居中需求，使用绝对定位和负边距的方法就足够了。而如果你需要一个更复杂的响应式布局，则可能需要考虑使用Flexbox或Grid布局。 例如，如果一个网页需要兼容多种设备，并且页面上需要居中的不仅仅是单个...
前端学习笔记：实现一个盒子水平居中，学习代码
最新发布
06-21
使用绝对定位时，可以通过设置`left`和`right`属性为`50%`，再配合`transform: translateX(-50%);`来实现元素的水平居中。 ```css .container { position: relative; } .box { position: absolute; left: ...
CSS绝对定位元素居中的几种方法
pscool的博客
02-28 2670
CSS居中绝对定位元素的方法，有很多种 div宽度未知1 <body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> 没有宽度<br /> 照样居中，嘿嘿嘿 </div> </div> </body&g
如何使用 CSS 居中对齐绝对定位的 DIV
qq_25153359的博客
06-03 419
如何使用 CSS 居中对齐绝对定位的 DIV
【CSS】实现div块上下左右居中对齐的5种方式
weixin_45620943的博客
10-30 8903
以上2,4,5方式，注意浏览器版本，较老版本浏览器可能不兼容。
div绝对居中的六种方法
YuzuruHa的博客
05-21 6154
在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。 方法一:绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） div{ background:red; position: absolute; left:50%; top:50%; transform: tr.
绝对定位的盒子水平居中
09-04
绝对定位的盒子水平居中可以通过设置left属性为50%，并且使用负的margin-left值将盒子向左移动自身宽度的一半来实现。具体来说，可以给父盒子添加相对定位，并设置宽度。然后给子盒子添加绝对定位，并设置宽度。最后，使用left属性设置为50%，并且使用负的margin-left值为子盒子的宽度的一半，来实现盒子的水平居中。以下是一个示例代码： ```css .father { position: relative; /* 给父盒子添加相对定位 */ height: 400px; width: 600px; background-color: aquamarine; margin: 0 auto; /* 水平居中 */ } .son { position: absolute; /* 给子盒子添加绝对定位 */ width: 300px; height: 200px; background-color: bisque; left: 50%; /* 让子盒子水平居中 */ margin-left: -150px; /* 将子盒子向左移动自身宽度的一半 */ } ``` 通过以上代码，可以实现绝对定位的盒子在父盒子内水平居中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [使用绝对定位实现盒子水平居中](https://blog.csdn.net/weixin_47477471/article/details/128519702)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS-----绝对定位盒子水平居中](https://blog.csdn.net/wode39/article/details/126222174)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值