块级元素在块级元素垂直左右居中 和（文字加图片水平居中）

垂直左右居中的几种方法

方法一：绝对定位（子元素可以未知高度和宽度）

  html


        



css

  .div1{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: black;
        }
  .div2{
            margin: auto;   /*这个margin很关键，没有就不能居中了*/
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: red;
            width: 100px;
            height: 100px;
        }

方法二：做单元格处理（父元素需要输入固定高度）

html


        



css
  .div1{
            width: 200px;
            height: 200px;     /*需要写固定高度*/
            background-color: black;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
        }
   .div2{
            background: red;
            width: 100px;
            height: 100px;
            display:inline-block;
        }

方法三：flex布局（子元素也可以未知高度和宽度）

html


        



css
    .div1{
            width:200px;
            height:200px;
            background-color: black;
            display:flex;
            justify-content:center;
                        align-items:center;
        }
    .div2{
            width:100px;
            height:100px;
            background-color: red;
        }

还有方法就是子元素绝对定位，top 和 left 都是 50%，再用margin偏移（需要知道子元素宽高），相信大家都知道

文字加图片水平居中

把文字和图片设置 display: inline-block;vertical-align: middle;
然后给父元素设置 font-size: 0;text-align: center;

额外小插曲
其实最开始我需要div在模态框里面 垂直 左右居中，居中到是实现了，但是如果内容高度超过了屏幕，即使设置了 overflow: auto;也有一部分内容看不到。至今也没有找到一个只用css就能解决的两全其美的方法（加上js还是很容易实现）

参考文章 http://www.cnblogs.com/gwcyulong/p/6251342.html