绝对定位盒子居中

最新推荐文章于 2024-09-06 09:38:49 发布
最新推荐文章于 2024-09-06 09:38:49 发布
阅读量372 收藏
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62468469/article/details/121298973
版权

加了绝对定位的盒子不能使用margin：0 auto；水平居中。可以添加一下属性

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

2.margin-left：盒子自身宽度的一半；

垂直居中

1.top:50%;

2.margin-top: 盒子自身高度的一半。

“冷眸SOUl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web开发中盒子居中的几种方法
09-22
Web开发中盒子居中的几种方法包括： 1. margin固定宽高居中：这种方法需要事先知道盒子的宽高，通过设置父容器的水平自动外边距（margin: auto）来实现水平居中，垂直居中则需要调整子盒子的margin值。代码示例中，...
css 子绝父相中让绝对定位的盒子居中
weixin_40551017的博客
02-18 604
left:50%; margin-left:-子盒子(子绝父相)宽度的一半 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; ...
绝对定位的盒子居中算法
阿牛哥的博客
11-12 680
此算法的优点是： 随着网页页面的大小，不变的是位置一直居中在页面窗口当中。层叠，优先级，属性集合定义，定位算法
实现一个盒子水平居中的三种方法.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表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 1625
捕捉一只耿鬼
CSS 尺寸 (Dimension)
lly202406的博客
09-05 355
CSS 尺寸属性是控制网页布局的关键。通过理解并有效使用这些属性，您可以创建既美观又。
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
流绪@微梦
09-03 554
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
使用 SCSS 或 LESS 相比于纯 CSS 的好处
Chloeeeeeeee的博客
09-04 899
SCSS 和 LESS 作为 CSS 预处理器，提供了更多的编程功能，使得样式代码更加简洁、灵活和可维护。虽然现代 CSS 也在不断引入新特性（如 CSS 变量、网格布局等），但 SCSS/LESS 在复杂项目中依然具有明显的优势。
css radius
时间不说谎
09-03 641
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
css spacing设置间距
时间不说谎
09-03 304
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
VitePress 自定义 CSS 指南
最新发布
软考鸭
09-06 415
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
【vue css】css字体设置渐变色
weixin_41747256的博客
09-04 330
css字体设置渐变色
修改打包后element-ui的字体文件名；JS文件名；CSS文件名
weixin_39311719的博客
09-03 468
修改这些静态文件名的原因是客户那边扫描出漏洞：字体文件名称不符合安全规则，就想办法给全部重新命名。
CSS实现DIV水平展示
weixin_43159039的博客
09-03 600
1、Flexbox 方法：使用来创建一个弹性盒子布局。用于在主轴上均匀排列两个 div。每个 div 设定了宽度和边框样式。2、使用Flexbox对多个div的水平排列比float简单。
Css：属性选择器、关系选择器及伪元素
米拉
09-03 615
2、::first-line（:first-line）和::first-letter（:first-letter）::first-letter（:first-letter） 用于块级元素，设置附属元素第一个字母（字）的样式。1、::before（:before）和::after（:after），注：content是必须的。::first-line（:first-line）用于块级元素，设置附属元素第一个行内容的样式。3、::selection（注：是:: ）设置鼠标长按拖动选中内容的样式。
css实现卡片右上角的状态
时漂亮的博客
09-02 617
【代码】css实现卡片右上角的状态。
绝对定位的盒子水平居中
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、付费专栏及课程。

余额充值