div 内容水平垂直居中

对于前端布局来说。总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法。。

1.对于布局来说。一个div搞定、

<div id="big">
    <img src="img/3.jpg" />
</div>

2.然后css

    #big {
         width: 800px;
         height: 800px;
         border: 1px solid red;
         margin: 0 auto;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
          align-items: center;
    }

图片也可以替换成文字,等各种元素,

 

 

posted @ 2017-07-04 14:57  咚咚酱  阅读(246)  评论(0编辑  收藏  举报