绝对定位使用margin:0 auto居中

最新推荐文章于 2024-05-30 15:33:48 发布

Li-Jiacong

最新推荐文章于 2024-05-30 15:33:48 发布

阅读量906

点赞数

分类专栏：技术类文章标签： css 居中 margin 绝对定位

本文链接：https://blog.csdn.net/Mr_lizi/article/details/83384468

版权

本文介绍了CSS中如何使用margin:0 auto实现绝对定位元素的水平居中。内容引用自张鑫旭的《CSS世界》，强调了在绝对定位模型中，当left和right的属性值同时存在时，元素的宽度表现为格式化宽度，从而能够实现居中效果。

摘要由CSDN通过智能技术生成

先上结论：只要对立方位的属性值同时存在时即可

position: absolute;
left: 0;	/*不一定要0，存在即可*/
right: 0;	/*不一定要0，存在即可*/
margin: 0 auto;
width: 		/*该多少就多少*/

格式化宽度：格式化宽度仅出现在“绝对定位模型中”，也就是出现在position属性值为absolute或fixed的元素中。对于非替换元素，当left/right或top/bottom对立方位的属性值同时

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Li-Jiacong

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS之“绝对定位”的盒子使用margin:0px auto；不能实现水平居中的解决方案

鸭绒的博客

07-09

2634

在盒子实现水平居中的布局中，我们经常直接使用margin:0px auto;来实现居中，在很多时候的确可以一句这样的代码就实现了，但在绝对定位的盒子中，这是不起作用的。 1.根据代码测试是否真如上面所说： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.

绝对定位+margin auto垂直居中引发的思考

qq_38164763的博客

06-10

1065

占

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

绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

weixin_30851409的博客

10-13

276

声明： web小白的笔记，欢迎大神指点！联系QQ：1522025433. 我们都知道margin: 0 auto；可也实现块状元素的水平居中；但是对于绝对顶为的元素就会失效；请看实例： <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位...

使用auto实现绝对定位元素的居中(这方法还不太懂）

lyclyc_的博客

06-25

430

代码如下（兼容 ie8以上的浏览器） <!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>

绝对定位，margin:0 auto，让元素竖直居中

web_qdkf的博客

11-30

1530

问题： div { margin: auto; position: absolute; top: 0; left: 0; right: 0 bottom: 0; width: 100px; height: 100px; } 是如何自适应的。原因是，绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺

解决绝对定位居中的问题

ljmkmnkl的博客

05-01

464

在使用绝对定位时，发现让用magin和padding让内容居中不是很好，在网上查了些资料，返现 position:absolute; right:0; left:0; margin:0; text-align:center;加了这些就可以实现居中了

css margin 0 auto什么时候才能起到水平居中的效果

weixin_41973410的博客

03-17

413

根据stack overflow的回答：What, exactly, is needed for “margin: 0 auto;” to work? 必须满足以下几个要求：块级元素，比如：display: block或者display: table 不能是浮动元素（float） position不能是fixed或absolute 必须设置固定的width ...

在IE下，当margin:0 auto;无法使得块级元素水平居中时

11-30

例如，如果`.wrap`元素内部有其他浮动元素或使用了绝对定位，那么`text-align`方法可能会失效。此时，可以考虑使用其他居中策略，如： 1. 使用Flexbox布局： ```css .wrap_parent { display: flex; justify-...

常规流，浮动流，定位，css:width:auto和margin：auto以及了解margin盒子塌陷

Chenxiaoxuget的博客

12-22

353

当在常规流下： 1）设置盒子width或margin为auto时，这时候子盒子会吸收所有父盒子未设置的宽度，不影响高（这就是设置margin：0 auto；会居中的原理）；设置padding为auto不起作用 2）同时设置width和margin为auto时，这时width会抢走所有的父盒子未设置的宽，margin不起作用在浮动流下：设置盒子width或margin为auto时，不起作用（因为脱离文档流），只有里面有内容时才能撑开盒子，否则的话margin或width为0 设置margin塌陷 &lt

学习记录306@CSS中auto居中的问题

教练我想学编程

09-02

256

对于标准流而言，在设置了宽度高度后，使用margin:0 aotu;即可实现盒子的居中： @charset "utf-8"; /* CSS Document */ *{margin:0;padding:0;} li{list-style:none;} a{text-decoration:none;} div{ width:100px; height:100px; background-color:red; margin:0 auto; } <!doctype html> &lt

Div使用margin居中常见问题

04-30

虽然我们知道在CSS中加margin:0 auto;(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果，但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。这往往是由以下两种常见原因引起的： 1、没有设置宽度 2、没声明DOCTYPE

在css中用auto使div居中对齐

wchwdog13的博客

02-04

437

自己一直都这么认为，提升自己的能力，才是在任何地方能立足的基础，这些年一直希望自己在专业上保持进步。又思考一下，在各方面的能力上，其实还欠缺很多，一直在找时间弥补和提升，越来越发现，自己的不足之处越来越多。要充分肯定不够好的自己，不求全方位，只求在个别方面，做的够好。注定人的一生是焦虑的，注定人的一生是忙碌的，注定人的一生有无限种可能，相信任何时候，张开眼，都能看到希望。感慨发完了，今晚看完演出，回到房间里，刷了一段css视频，视频上讲的是使用auto使div居中对齐，我亲自试了一下。写了一个div，如

浅谈margin:0 auto元素居中的问题

JoelLiverpool的博客

07-20

698

今天整理了下元素居中的问题，和大家分享和交流一些心得首先，需要居中的元素分为三类：普通的div浮动元素设定了绝对定位的元素关于普通的div的居中这个相对来说是比较简单的，直接用margin:0 auto; div{ width:100px; height:100px; background-color:yellow; margin:0 auto; }

margin:0 auto 表示什么意思？？

qq_1164549051的博客

03-23

646

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right 因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）

css设置position后为什么margin:0 auto；失效了