关于CSS中left:50%; top:50%; margin-left: -150px; margin-top: -75px;

最新推荐文章于 2023-06-23 23:10:43 发布

让我再睡一会儿

最新推荐文章于 2023-06-23 23:10:43 发布

阅读量1.8w

点赞数 11

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_38454121/article/details/78735955

本文介绍了一种使用CSS实现登录框在浏览器中始终保持居中的方法。通过设置left:50%和top:50%，结合margin-left和margin-top的负值，确保元素在不同屏幕尺寸下都能准确地水平垂直居中。

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

#login_box {
      width: 300px;
      height: 150px;
      background: #eee;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;top: 50%;
      margin-left: -150px;
      margin-top: -75px;
      display: none;
    }

这几行在#login_box中的目的是使其在浏览器中水平居中显示。（无论浏览器被如何拉伸，该login_box始终保持居中）

原理（对齐浏览器的中心点与#login_box的中心点，这样就使得.foot在浏览器中水平居中了）：
left:50%; 使#login_box左边框距离浏览器左边50% ，所以login_box整体并不是位于浏览器中间，

需要使用margin-left: -150px; 使#login_box向左移动150像素（即login_box自身宽度的一半）。这样box整体就位于浏览器中间了。

top: 50%; margin-top: -75px 的道理同上。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

让我再睡一会儿

关注关注

11
点赞
踩
41

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS的四种定位方式详解

QIQIQI1175113305的博客

06-26

1880

在CSS中定位使用position属性来设置，有以下4种取值：静态定位 -static 相对定位 -relative 绝对定位 -absolute 固定定位 -fixed 静态定位 -static 静态定位是css中的默认定位方式，也就是没有定位，在正常文档流中。在此定位方式中，设置top，bottom，left，right，z-index属性是无效的。相对定位 -relative ...

关于绝对定位元素居中的流体特性和top:50%的兼容性问题

zzxboy1的博客

07-18

2020

在我们的一般认知中，对元素使用绝对定位时，margin: auto肯定就失效了，margin：auto只对指定了宽高的元素生效，是通过计算得来的。绝对定位元素脱离文档流，理论上自然是无法使用margin:auto的。但事实上并非如此，我们往往在不考虑浏览器兼容性的情况下使用 top: 50%; transform:translate(0, -50%)来实现垂直居中或者对明确知道高度的元素使用负mar

2 条评论您还未登录，请先登录后发表或查看评论

CSS居中之 { left:50%； top:50%； transform:translate(-50%,-50%)； }

kfepiza的博客

03-04

2753

也可以写成:用 translate 的必须是块级元素, 或者absolute,fixed 才会生效比如 translate 在 relative+inline 时不会起作用left 和 top 在 position:relative,absolute,fixed 才会生效所以position不能是static;display不能是inline,relative+inline 时, left和top起作用, translate不起作用。

top: 50%；left: 50%；transform: translate(-50%,-50%)实现浏览器中央效果

Love And Program的博客

05-08

1675

恰巧帮学姐写论文，想设个居中效果的时候用到了这个。 top: 50%; left: 50%;这猜也能猜出在他中心轴线上的右下部分吧，嘿嘿 transform: translate参考自己的位置来平移最终效果前提是Position都是按以相对于浏览器的位置所写的，也就是position:fixed;当然，其他形式下也可以，只要是相对浏览器位置即可，.外层没有position时可以使用position：absolute ...

【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系

小秀的博客

06-23

2915

`top: 50%;` 和 `transform: translateY(-50%);`的区别和联系

JavaScript+Css标签元素定位；在left:50%；top:50%；transform:translate(-50%,-50%)；居中的情况下，使该元素具有移动功能。

Script_ssq的博客

11-04

706

JavaScript+Css标签元素定位；在left:50%;top:50%;transform:translate(-50%,-50%);居中的情况下，使该元素具有移动功能。项目中遇到的，记录一下。

css margin-top 50%问题

vagabond_的博客

09-28

494

css margin-top 问题记录

clear:both后margin-top不起作用其他左右下都起作用

09-25

第二个`div`使用`clear:both`来确保它在垂直方向上不与第一个浮动`div`重叠，同时设置了`margin-top:20px`、`margin-bottom:20px`和`margin-right:20px`。在这种情况下，`clear:both`的`margin-top`不起作用的原因...

css margin-left在IE6下的问题的解决方法

12-12

比如原来是margin-left:20px，经过ie6的解释会变成40px 解决办法是在原来的margin-left后再加上一个_margin-left:10px，变成margin-left:20px;_margin-left:10px 后者的样式将只适用于ie6 问题解决

CSS绝对定位元素left设为50%实现水平居中

01-19

绝对定位的元素left设为50%时，是已左上角为原点的，所以只要再使用margin属性添加负值补偿回来即可。示例： [css] 复制代码代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0...

css中常用的几种居中方法(推荐)

12-13

在前端面试中，大都会问你div居中的...1，使用position:absolute,设置left、top、margin-left、margin-top的属性 CSS Code复制内容到剪贴板 .one{ position:absolute; width:200px; height:200px; top:50%;

CSS学习笔记——transform:translate(-50%,-50%)实现水平垂直居中

Jane的博客

01-07

2966

参考： https://blog.csdn.net/qq_41083105/article/details/115233510 https://www.cnblogs.com/knuzy/p/9993181.html translate()的使用 translate() 函数是CSS3的新特性。在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用下述样式，块是以左上角为原点，故不处于中心位置。 top: 50%; left: 50%; 而 translate(-50%,-50%) 作用是，往

left:50%； transform:translate(-50%)；

x1037490413的博客

07-26

1919

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。当使用：top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 ...

手机html left 50%,绝对定位left:50% 隐式设置了宽度

weixin_35523579的博客

06-22

373

绝对定位left:50% 隐式设置了宽度不定宽高的盒子如何在父盒子中垂直居中，我们常做的一种方式便是left: 50%;top: 50%;transform: translate(-50%, -50%);那这个盒子是否隐式添加了宽度吗？测试htmlhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh...

物体position:absolute后设置left:50%发生的有趣小事

weixin_30627381的博客

07-05

281

今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下一准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高 ②一个内联元素设置position:absolute会自动转为一个块状元素那么我提出三个问题: problem01:一个没有设置宽高的块状元素position:absolute,top...

CSS居中

m0_61700036的博客

11-27

893

目录行内元素 1、水平居中 2、垂直居中块级元素 1、水平居中 2、水平垂直居中（1）定位（2）定位+margin （3）定位+transform （4）padding (5) flex布局（6）表格法行内元素 1、水平居中 text-align：center //Html 代码 <div class="father"> <span class="son">子元素</span> </di..

CSS绝对定位使用left:50%实现水平居中偏左问题

x1037490413的博客

11-06

8959

现象：当使用绝对定位进行元素定位时，使用left：50%将元素进行水平居中但会出现偏左的问题原因：绝对定位的元素left设为50%时，是已左上角为原点的。解决方案：只要再使用margin-left属性添加负值补偿回来即可。比如： div.panel{ 　　position:absolute; 　　top:180px; 　　left:50%; 　　margin...

CSS垂直居中布局

weixin_42549581的博客

03-26

710

块垂直居中（高度auto） 1、设置position: absolute；top: 50%; left: 50% 和 transform:traslate(-50%,-50%)实现水平垂直居中 <style> .content{ position:absolute; top: 50%; left: 50%; transform: translate(-...

css盒子垂直水平居中的四种方式

m0_62823653的博客

03-13

1417

绝对定位居中法有三种，还有一种是flex属性居中 1.绝对定位居中法（利用绝对定位）（如果是在父盒子里居中，则个父盒子设置相对定位）子绝父相 top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...

.loadbox{position:absolute; width:160px;height:150px; color: #aaa; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}

07-15

通过设置负的 margin-top 值（margin-top: -100px）和负的 margin-left 值（margin-left: -75px），将元素自身的高度和宽度的一半偏移，以使元素在父元素中垂直居中和水平居中。这样，"loadbox" 类的元素将以固定的...