问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中

html代码如下:

    <div class="test">
<div class="m-fixed">
</div>
</div>

css代码:

.test{
height: 200px;
font-size: 14px;
width: 100%;
background-color: #D8BFD8
}
.m-fixed{
position: fixed;
top:;
width: 80%;
background-color: #00FF00;
height: 200px;
margin: auto;
}

效果图:

解决办法:

在子元素设置:left:0;right:0

如果像我一样宽度用的是百分比的话可以直接设置子元素:left:(1-子元素占父元素宽度百分比)/2,我这里是:left:10%

实现效果:

问题导致原因和解决办法实现原理个人还不是很明白,后面搞清楚了以后补上。

day2-设置position:fixed/absolute无法使用margin:auto调整居中的更多相关文章

  1. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  2. 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

  3. margin auto 实现居中,与text-align:center的区别

    本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...

  4. 设置position(absolute,fixed)导致flex布局不生效

    个人解决办法:将要设置display:flex的dom外面在套一个div,并且设置宽度,就可以了.

  5. IE6和IE7下绝对定位position:absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  6. position为absolute的元素如何实现居中

    当给div设置absolute时,该元素已经脱离文档流,呈现浮动状态,只能通过left,top,right,bottom来设置属性,要实现居中有两种方法: 一.css法 <div class=& ...

  7. margin重叠现象与margin auto自适应居中

    上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ wid ...

  8. IE8 margin: auto 无法居中

    需要给body元素添加属性 body { text-align: center; width: 100%; } ok,可以正常居中.

  9. css中position:fixed实现div居中

    上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...

随机推荐

  1. vue图片的处理技巧

    我们想用 post 向后台发送字符串类型的数据:我们可以不适用 data 来进行数据传输,而是用 params 来进行数据传输 代码的简洁之道:分模块化书写: vue 里面提供对图片的监听事件:loa ...

  2. vmvare ubuntu虚拟机固定ip设置

    1.vmvare网络设置 2.window网络设置 3.ubuntu网络设置 先ifconfig 查看ip 已经设置为192.168.122.128 sudo vim /etc/network/int ...

  3. ambari部署Hadoop集群(2)

    准备本地 repository 1. 下载下面的包 wget http://public-repo-1.hortonworks.com/ambari/centos7/2.x/updates/2.7.3 ...

  4. [转]spring的filter中targetFilterLifecycle作用

    在web.xml中进行配置,对所有的URL请求进行过滤,就像"击鼓传花"一样,链式处理. 配置分为两种A和B. A:普通配置 在web.xml中增加如下内容:<filter& ...

  5. Cortex-M3 双堆栈指针(MSP&PSP)

    [双堆栈指针(MSP&PSP)] Cortex-M3内核中有两个堆栈指针(MSP & PSP),但任何时刻只能使用到其中一个. 复位后处于线程模式特权级,默认使用MSP. 通过SP访问 ...

  6. RNN 与 LSTM 的原理详解

    原文地址:https://blog.csdn.net/happyrocking/article/details/83657993 RNN(Recurrent Neural Network)是一类用于处 ...

  7. mongodb将mysql数据导入

    1.首先将数据从mysql数据库导出为xls文件 SELECT * FROM user INTO OUTFILE "F:\1.xls" 2.notepad++打开,用utf8编码保 ...

  8. Hibernate5+Spring4整合

    (1) pom.xml <!--Spring Object/Relational Mapping --> <dependency> <groupId>org.spr ...

  9. BOM Summary P268-P269

    The Browser Object Model(BOM) is based on the window object, which represents the browser window and ...

  10. JavaScript基础之数组常用方法

    目录 JS 数组常用API 常用属性 常用方法 常见方法语法解释 from方法 isArray concat every fill filter find forEach indexOf join k ...