如何水平居中元素

龍峰呈祥

如何使用 CSS在另一个中水平居中？
- k6 Y, X, a! i% Y4 D

  Foo foo

               
    解决方案:                                                               
                                                                你可以把这个 CSS 内部应用：

#inner {  width: 50%;  margin: 0 auto;}

当然，你不必设置 width50%。任何小于包含宽度的宽度都可以用margin: 0 auto是实际居中的作用。
& l8 M' y2 d0 L假如你的目标是Internet Explorer 8(以及更高版本)，最好它:

#inner {  display: table;  margin: 0 auto;}

它将使内部元素水平居中，无需设置特定的元素width.
  Z0 g5 R/ D. B1 d; m这里的工作示例：
# W; |7 g& f) @7 q, o9 q& \4 p

#inner {  display: table;  margin: 0 auto;  border: 1px solid black;}#outer {  border: 1px solid red;  width:100%}  Foo foo

编辑通过flexbox在水平和垂直居中设置 div 风格很简单。

#inner    border: 1px solid black;}#outer {  border: 1px solid red;  width:100%;  display: flex;  justify-content: center;}  Foo foo

要将 div 垂直居中对齐，请使用属性align-items: center。