html里div水平居中,html+css div水平居中的几种方法

方法一：

为元素设置width宽度和margin:0 auto以及text-align:center; 实例如下：

width: 90%;

margin: 0 auto;

text-align:center;

}

Foo foo

方法二：

使用display: flex;和margin: auto， 实例如下：

.outer {

display: -webkit-flex;

display: flex;

//-webkit-justify-content: center;

//justify-content: center;

//align-items: center;

width: 100%;

height: 100px;

background-color: lightgrey;

}

.inner {

background-color: cornflowerblue;

padding: 2rem;

margin: auto;

//align-self: center;

}

Foo foo

方法三：

使用display: table;和margin: 0 auto;属性。 实例如下：

#inner {

display: table;

margin: 0 auto;

}

Foo foo