html div子元素居中,css flex 子元素居中

基本是从书和教程抄的，你看看哪个适合你。

1

.flex-container {

padding: 0;

margin: 0;

list-style: none;

/* 定义流动方向，包装项目

*记住这是相同的：

* flex-direction：row;

* flex-wrap：wrap;

*/

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

/* 分配剩余空间 */

-webkit-flex-flow: row wrap;

justify-content: space-around;

}

.flex-item {

background: black;

padding: 2px;

width: 100px;

height: 100px;

margin-top: 10px;

}

2

HTML：

CSS:

* {

margin: 0;

padding: 0;

}

.flex-container {

width: 960px;

margin: 20px auto;

min-height: 300px;

font-weight: bold;

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row nowrap;

flex-flow: row nowrap;

-webkit-justify-content: space-around;

justify-content: space-around;

-webkit-align-items: stretch;

align-items: stretch

}

.flex-container>div {

padding: 10px

}

.flex-container>div:nth-child(1) {

background-color: #e4f1e4;

-webkit-flex: 1;

flex: 1

}

.flex-container>div:nth-child(2) {

background-color: #d2d4eb;

-webkit-flex: 1;

flex: 1

}

.flex-container>div:nth-child(3) {

background-color: #f9e7e9;

-webkit-flex: 1;

flex: 1

}