css不定宽元素怎么水平居中？

css不定宽元素怎么水平居中？

公共代码：

html：

<div class="parent">
    parent
    <br>
    <div class="child">
        child
    </div>
</div>

css：

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
 
    .parent {
        width: 100%;
        height: 100%;
        background: #fac3fa;
         
        .child {
            width: 50%;
            height: 50%;
            background: #fe9d38;
        }
    }
}

方案一: text-align(父) + inline-block(子)

代码:

css:

.parent {
    text-align: center;
 
    .child {
        display: inline-block;
    }
}

方案二: absolute + transform

.parent {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

方案三: flex

注: 由于使用flex的关系, 这里去掉了 parent 和<br>

.parent {
    display: flex;
    justify-content: center;
}

更多web前端开发知识，请查阅 HTML中文网 ！！

以上就是css不定宽元素怎么水平居中？的详细内容，更多请关注0133技术站其它相关文章！