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:;

        width: 80%;

        background-color:    #00FF00;

        height: 200px;

        margin: auto;

        }

效果图：

解决办法：

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

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

实现效果：

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

巴特西

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

最新文章

热门文章