如何设置整体布局居中?

  在CSS3中有一个新布局模型名为弹性盒布局。

  弹性盒由伸缩容器和伸缩项目组成，而伸缩项目又被包含在伸缩容器中，只有display属性为flex或inline-flex时才可以得到一个伸缩容器。

  语法：

dispaly: flex || inline-flex;

  其中flex属性值表示设置为flex的容器被渲染为一个块元素，而inline-flex则为行内元素。

  而在伸缩容器当中可以通过以下代码实现居中效果：

  html部分

<div class="box">
    <div><h1>标题</h1></div>
</div>

  css部分

.box{
   /* 设置这些属性是为了效果更明显 */
   width: 300px;
   height: 200px;
   border: 1px solid red;
   /* 居中效果 */
   display: flex;
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
}

h1{
   background: yellowgreen;
}

效果图

大家有什么好的方法可以在下面留言，互相学习!