如何水平居中元素

龍峰呈祥

如何使用 CSS在另一个中水平居中？

  Foo foo
3 R" S0 d8 d: M6 I4 {% y" ]3 b5 W

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

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

当然，你不必设置 width50%。任何小于包含宽度的宽度都可以用margin: 0 auto是实际居中的作用。
6 |: k& j0 ~$ p5 W- u# b假如你的目标是Internet Explorer 8(以及更高版本)，最好它:

#inner {  display: table;  margin: 0 auto;}
  T# w, X+ L1 F6 q6 H8 q8 y% X

它将使内部元素水平居中，无需设置特定的元素width.
这里的工作示例：

#inner {  display: table;  margin: 0 auto;  border: 1px solid black;}#outer {  border: 1px solid red;  width:100%}  Foo foo
; p' A6 Y9 u9 w7 \' ^' g. p

编辑通过flexbox在水平和垂直居中设置 div 风格很简单。
9 }* ~  E, m' `! E' u

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

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