第一步

定位距离左侧（相对于浏览器）50%，此时盒子左侧是在浏览器中间的

    position: fixed;top: 0;left: 50%;

显而易见这不是我们想要的效果，我们希望盒子的中线与处于浏览器正中间

第二步

//让盒子左移盒子的百分之五十
transform: translateX(-50%);

此时盒子就是居中对齐了

建议

在移动的时候最好设置为百分数，避免出现盒子大小改变的情况，设置为固定数值便不是居中对齐的效果了。

完整小栗子

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小粉的移动</title><style>.box {position: fixed;top: 0;left: 50%;width: 200px;height: 200px;//兼顾浏览器的兼容性-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: pink;}</style>
</head><body><div class="box">我是小粉</div>
</body>

对于不了解transform属性的朋友这里送上贴心小链接：

https://www.w3school.com.cn/cssref/pr_transform.asp

固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？相关推荐

css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
关于margin: auto及margin: 0 auto的一些见解
在写css时margin:auto;使用频率非常高,常用于div的居中. 何为margin? margin是指块级元素的外边距,如下图所示,XXXXX是div中的内容,通过设置margin的值,可控制 ...
[css] 怎么IE6下在使用margin:0 auto；无法使其居中？
[css] 怎么IE6下在使用margin:0 auto;无法使其居中? 浏览器解析的问题,IE6下需要对居中的元素设置text-align:center属性使其margin:0 auto;生效. 个 ...
块状元素的居中，首先设置宽度，再设 margin: 0 auto
块状元素的居中,首先设置宽度 width="10px",再设 margin: 0 auto; . 转载于:https://www.cnblogs.com/npk19195globa ...
margin: 0 auto；的作用
在html中,为什么我们设置一个margin: 0 auto;就可以使得块元素居中? <!DOCTYPE html> <html lang="en"> &l ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...
margin:0 auto是什么意思
margin是外边距的意, 当一个元素样式属性里有dumargin:0 auto时,并且父元素的宽度是确定的, 意思是这个元素处于其父元素的居中位置,并且这个元素的上下外边距为0 即:上下外边距为0, ...
text-align:center 和margin:0 auto的区别
基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性.支持值 ...

固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？

固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？

第一步

第二步

建议

完整小栗子

固定定位的盒子使用margin：0 auto；是无法水平居中的，此时该怎么操作呢？相关推荐

最新文章

热门文章