css3代码属性Flexbox实现内部div上下居中效果

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。.zzz{width:600px;height:150px;margin:0 auto;background-color:#ccc; /* 以下为核心CSS代码 */ display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center;}.zzz .demo1{width:100px;height:100px;margin:20px;background-color:#fff;}.zzz .demo2{width:200px;height:70px;margin:20px;background-color:#fff;}

代码整体结构。

查看效果。