问题描述:父元素给定宽度,子元素给定宽度,设置子元素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. 通过JS给HTML元素增加、删除和获取属性内容

    1.通过ID或者其他元素找到要处理的HTML对象:(举例通过ID) var obj=document.getElementById('id');12.操作此对象 添加属性:obj.setAttribu ...

  2. JPEG格式 介绍

    JPEG格式 jpeg是有损压缩格式, 将像素信息用jpeg保存成文件再读取出来,其中某些像素值会有少许变化.在保存时有个质量参数可在[0,100]之间选择,参数越大图片就越保真,但图片的体积也就越大 ...

  3. Session技术入门代码案例

    package com.loaderman.demo; import javax.servlet.ServletException; import javax.servlet.http.*; impo ...

  4. c# 动态编译CodeDomProvider.CompileAssemblyFromSource(CompilerParameters cp,string code)

    1.使用c#动态编译,可参考如下: //生成c#代码 string code = GenerateCode(); CodeDomProvider cdp = CodeDomProvider.Creat ...

  5. eclipse svn is already locked解决方案

    转: eclipse svn is already locked解决方案 2017年05月15日 22:21:54 Aaron莫言 阅读数:5867   版权声明:本文为博主原创文章,未经博主允许不得 ...

  6. mybatis-config.xml 和 mapper基本设置

    mybatis-config.xml : <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  7. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_6 自定义类型转换器代码编写

    mvc是基于组件的方式 类型转换的接口Converter,想实现类型转换,必须实现这个接口 Ctrl+N搜索 converter 这是一个接口类 它有很多的实现类.S是字符串.后面T是指要转换类型 新 ...

  8. Java实现批量下载选中文件功能

    1.在action中定义变量 ? 1 2 3 4 5 6 private List<String> downLoadPaths = new ArrayList<String>( ...

  9. delphi中and和or的特殊用法

    1=1 10=2 100=4 1000=8 1 or 2 = 3(11); 1 and 3 = 1; 2 and 3 = 2; 2 or 4 = 6(110); 2 and 6 = 2; 4 and ...

  10. 小程序请求豆瓣API报403解决方法

    微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种 ...