css怎么让一个元素水平居中?

css怎么让一个元素水平居中?比如想让下面的inner元素在outer元素内部水平居中。

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
csshtml居中
1
191
小课
小课2022-05-29 21:34
1 个回答

如果使用flex布局的话,这就很容易实现了,如下配置即可。

#outer {
    display: flex;
    justify-content: center;
}

如果不使用flex布局的话,可以分两种情况,一是#inner有明确的宽度,如下配置即可。

#inner {
    width: 100px;
    margin: 0 auto;
}

二是#inner没有明确的宽度,也就是宽度适应内容,可以如下配置,需注意fit-content的兼容性。

#inner {
    width: fit-content;
    margin: 0 auto;
}
1
已修改
小课
小课2022-05-29 21:58
你的回答

内容