day2-设置position:fixed/absolute无法使用margin:auto调整居中

问题描述:父元素给定宽度,子元素给定宽度,设置子元素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: 0;
        width: 80%;
        background-color:    #00FF00;
        height: 200px;
        margin: auto;
        }

效果图:

day2-设置position:fixed/absolute无法使用margin:auto调整居中_第1张图片

 

 解决办法:

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

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

实现效果:

day2-设置position:fixed/absolute无法使用margin:auto调整居中_第2张图片

 

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

你可能感兴趣的:(day2-设置position:fixed/absolute无法使用margin:auto调整居中)