绝对定位的盒子如何水平/垂直居中显示

最新推荐文章于 2023-01-02 12:21:35 发布
最新推荐文章于 2023-01-02 12:21:35 发布
阅读量380 收藏 2
点赞数
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Valentine_T/article/details/107586119
版权

绝对定位的盒子水平居中

绝对定位/固定定位的盒子，是不能通过设置margin：auto；来实现水平居中的。

在使用绝对定位时实现水平居中，可以使用如下图所示的方法：
在这里插入图片描述

  1. left：50%；：先让盒子左侧移动到父级元素的水平中心位置；
  2. margin-left：-100px;:再让盒子向左移动自身宽度的一半。

绝对定位的盒子垂直居中

  1. top: 50%;：先让盒子上侧移动到父级元素的垂直中心位置
  2. margin-top: -50px;：再让盒子向上移动自身高度的一半
山山而川-T
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
绝对定位元素的水平垂直居中的方法（3种任选）
01-21
1.css实现居中 缺点：需要提前知道元素的宽度和高度。 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .box{ width: ...
元素及文本的水平居中/垂直居中/绝对居中总结
09-25
简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦
css中让绝对定位的盒子水平或者垂直居中！！
fighting_dream的博客
01-29 436
这是一个标准流盒子，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现绝对定位的盒子水平居中</title> <style>
将一个绝对定位的div水平垂直居中对齐
12-13
在通常情况下，可以为元素添加margin:0px auto即可让元素在它的父元素水平居中，然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效，所以说还是要用老办法实现。 代码示例如下: 复制代码代码如下:<!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <title>蚂蚁部落</title> <style type=”text/css”> .father { width:600px; height:600px; background-color:green;
绝对定位情况下水平垂直居中的方法
weixin_34199405的博客
10-07 98
非绝对定位情况下，一般使用margin:0 auto的方法来进行居中，但在绝对定位情况下，margin:0 auto会失效。 这时，进行水平垂直居中可以如下： position:absolute; left:50%; //left设置为50%，这时是以元素的左侧进行的水平居中，所以需要设置margin-left为元素宽度的一半。 top:50%;//垂直居中原理同水平居中 margin-...
使用绝对定位实现盒子水平居中
笔记
01-02 110
上一篇我们用flex布局实现了盒子相对于整个页面水平居中，其实实现盒子水平居中的方式又很多种，这篇我们来用绝对定位实现盒子的水平居中。话不多说，直接上代码。
绝对定位的盒子水平垂直居中的方法
3木子熙H
06-13 438
加了绝对定位的盒子不能再通过margin:0 auto;,进行水平居中了，但是可以通过以下计算的方法实现水平和垂直居中。 水平居中： left:50%; :让盒子的左侧移动到父级盒子元素的水平中心位置 margin-left:-100px; :让盒子向左移动自身宽度的一半。 垂直居中： top:50%: : 让盒子的上边移动到父级盒子元素的垂直中心位置 margin-top:-100px; :让盒子向上移动到自身高度的一半 ...
css3基础100问之绝对定位的盒子怎样水平居中呢？（42）
weixin_45147894的博客
06-17 197
版心页面底部有装有八个小点的小盒子，小盒子属于绝对定位，但是如何水平居中呢？ 下面进行设置呀！ 没有得到想要的结果，原来margin:auto;层叠性给它代替过去了！ 去掉margin:auto;就可以了呢！ 现在水平居中了呢！ 关于margin在定位中的用法一定要懂得，还有margin为负值时。 ...
【CSS面试题】绝对定位的盒子水平居中
qq_40992225的博客
07-21 204
绝对定位的盒子如何水平垂直居中
CSS样式之transform（对元素的旋转、缩放、移动或倾斜）
anxin591025的专栏
08-18 8565
CSS样式 元素旋转： transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7d
CSS-----绝对定位盒子水平居中
wode39的博客
08-08 1207
正确做法：子盒子通过left属性向右移动父盒子宽度的50%，再通过margin-left负值向左移动自身宽度的50%；垂直居中同理可得：通过top属性向下移动父盒子高度的一半，再通过margin-top负值向上移动自身个高度的一半。在CSS中绝对定位的盒子无法通过margin：0 auto;.........
绝对定位的盒子居中
m0_71814235的博客
07-07 196
绝对定位的盒子居中
css 圣诞树 的 写作
qq_15555767的博客
01-12 422
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Page Title&lt;/ti
绝对定位的盒子如何实现水平垂直居中
weixin_33918114的博客
04-17 106
2019独角兽企业重金招聘Python工程师标准>>> ...
绝对定位的盒子实现水平居中
weixin_57037336的博客
09-12 125
绝对定位的盒子实现水平居中 像这样，如果盒子设置了绝对定位之后想要居中，那怎么办呢？这个时候使用margin:0 auto；肯定不起作用，我们需要给盒子添加向左移动游览器可视窗口的一半，即left:50%;这时候盒子移动如下图，偏右边一点。 这时候需要将盒子添加左margin盒子大小的一半即可，即margin-left:100px;效果如下图； 接下来附上代码： div { position: absolute; left: 50%;
绝对定位之盒子垂直水平居中的方法与固定定位
m0_62823653的博客
03-04 1081
绝对定位之盒子垂直水平居中的方法 /*绝对定位*/ 属性{position:absolute} 先水平方向居中 1.先让子盒子往右移动父盒子的一半 left: 50%; 2，再让子盒子往左移动自身宽度的一般 margin负值 margin-left: -50px; 然后竖直方向居中 1.先让子盒子往下移动父盒子的一半 top: 50%; 2.再让子盒子往上移动自身高度的一半 margin负值 margin-top: -50px; 具体操作 <!DOCTYPE html&gt
绝对定位的盒子如何垂直居中
machine_vision123的博客
06-20 180
a链接可以设置宽度和高度，做成一个盒子，如果是a链接设置了定位可以直接指定宽度和高度，不需要转换成块元素 绝对定位的盒子水平居中： bian ...
绝对定位的盒子水平、垂直居中
Liyunhao_haoge的博客
10-13 342
绝对定位的盒子水平、垂直居中 普通的盒子是左右margin改为auto就可以，但是对于绝对定位就无效了。 定位的盒子也可以水平或者垂直居中，有一个算法。 1、首先left50% 2、然后走自己外边距负的一半值就可以了。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
使用定位position实现元素居中
里昂的博客
10-24 4307
在使用绝对定位时要想实现水平居中，可以按照下图的方法： left: 50%;：让盒子的左侧移动到父级元素的水平中心位置； margin-left: -100px;：让盒子向左移动自身宽度的一半。 垂直居中同上 ...
div盒子水平垂直居中
最新发布
12-02
以下是两种div盒子水平垂直居中的方法： 1.使用flex布局 ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2.使用绝对定位和transform属性 ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 水平垂直居中 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值