水平垂直居中问题

1. 利用position和margin 实现

 

　　　　为居中元素的父级添加非static定位

  　　　 position: relative;

             为居中元素添加以下样式：

  　　　　 position: absolute;

  　　　　 left: 0;

  　　　　top: 0;

   　　　　right: 0;

  　　　　 bottom: 0;

  　　　　 margin: auto;

　　　　(注意：不给居中元素设置高高的话，该元素会与设置非static定位的父级同宽高。)

  

　　　　2.设置弹性布局使子元素居中

 

　　　　为居中元素的父级设置以下样式：

　　　　width: 400px;

　　　　height: 400px;

　　　　display: flex;

 

　　　　为居中元素添加以下样式：

　　　　margin: auto;

来源：https://www.cnblogs.com/01angel/p/11691761.html