Css3 布局

1. 文字内容居中
            html

   1. 文字居中
      

      css
      方式一:

   2. .another{
      	width: 300px;
      	height: 300px;
      	background: yellow;
      	display: table-cell;
      	vertical-align: middle;
      	text-align: center;
      }
      

      方式二：使用flexbox盒子模型

      .another{
      	 height: 300px;
      	 width: 300px;
      	 background: red;
      	 display: flex;
      	 justify-content: center;
      	 align-items: center;
      	 
      } 

2. 元素垂直居中
   html:
   

   css:
   

   body{
   	display: flex;
   	min-height: 100vh;//注意此处必须设置，否则无法垂直居中
   	margin: 0;
   }
   .another{
   	 height: 300px;
   	 width: 300px;
   	 background: red;
   	 display: flex;
   	 margin: auto;
   }