div水平垂直居中

Posted 2020-08-06 vivayue

我们平时常用的定高，top：50%；left：50%和margin-left负一半宽度margin-top负一半高度的居中方式暂不考虑，因为这种方式大家都会。

第一种绝对定位(absolute centering)居中：

<div class="abs-center"></div>

.abs-center{ height: 50%; width: 50%; background: red; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

原理：

在普通内容流（normal content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。

由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。

这么看来， margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的，所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

优点：

1、支持跨浏览器，包括IE8以上，Chrome,Firefox, Safari, Mobile Safari；
2、无需其他特殊标记，CSS代码量少；
3、支持百分比%属性值和min-/max-属性
4、不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
5、完美支持图片居中

缺点：

1、必须声明高度
2、在Windows Phone设备上不起作用

第二种方法table-cell居中

<div class="is-table">
    <div class="table-cell">
        <div class="center-block">
            <!-- content -->
        </div>
    </div>
</div>

1 .is-table{ display: table; background: grey; position: absolute; width: 100%; height: 100%; }
2         .is-table .table-cell{ display: table-cell; vertical-align: middle; background: blue; }
3         .is-table .center-block{ width: 50%; margin: 0 auto; background: red; }

优点：

1、不定高度
2、内容溢出会将父元素撑开
3、跨浏览器兼容性好

缺点：

1、需要大量额外的标记
2、ie7以下不支持

第三种方法transform

<div class="box"></div>

 1 .box{width: 50%;
 2             height: 400px;
 3             background: red;
 4               margin: auto;  
 5               position: absolute;  
 6               top: 50%; left: 50%;  
 7             -webkit-transform: translate(-50%,-50%);  
 8                 -ms-transform: translate(-50%,-50%);  
 9                     transform: translate(-50%,-50%);
10   }

优点：

1、内容可变高度
2、代码量少

缺点：

1、IE8不支持
2、属性需要写浏览器厂商前缀
3、可能干扰其他transform效果
4、某些情形下会出现文本或元素边界渲染模糊的现象

第四种方法inline-block

<div class="inline-block">
    <div class="center-block">
        <p>inline-block这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
    </div>
</div>

*{margin: 0; padding: 0; }
        .inline-block{
            text-align: center;  
              overflow: auto; 
              height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .inline-block:after{
            content: ‘‘;  
            height: 100%;  
            margin-left: -0.25em;
        }
        .inline-block:after, .center-block{ 
            display: inline-block;  
              vertical-align: middle; 
        }
        .center-block{
             max-width: 99%; 
             width: 500px;  /*自定宽度*/
            /* Prevents issues with long content causes the content block to be pushed to the top */  
              /* max-width: calc(100% - 0.25em)  Only for IE9+ */ 
        }

优点：

1、内容可变高度
2、内容溢出会将父元素撑开。

缺点：

1、IE7以下不支持
2、水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整
3、内容块宽度不能超过容器的100% - 0.25em。

第五种方法display: flex：

<div class="box">
    <!-- content -->
</div>

 1 html{height: 100%;}
 2         body{
 3            display: -webkit-box;   /* OLD: Safari,  ios, android browser, older WebKit browsers.  */
 4            display: -moz-box;      /* OLD: Firefox (buggy) */
 5            display: -ms-flexbox;   /* MID: IE 10 */
 6            display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
 7            display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
 8 
 9            -webkit-box-align: center; -moz-box-align: center; /* OLD… */
10            -ms-flex-align: center; /* You know the drill now… */
11            -webkit-align-items: center;
12            align-items: center;
13 
14            -webkit-box-pack: center; -moz-box-pack: center;
15            -ms-flex-pack: center;
16            -webkit-justify-content: center;
17            justify-content: center;
18 
19            margin: 0;
20            height: 100%;
21            width: 100%; /*needed for Firefox */
22         }
23         .box{
24            display: -webkit-box; display: -moz-box;
25            display: -ms-flexbox;
26            display: -webkit-flex;
27            display: flex;
28 
29            -webkit-box-align: center; -moz-box-align: center;
30            -ms-flex-align: center;
31            -webkit-align-items: center;
32            align-items: center;
33            height: 10rem;
34         }

优点：

1、内容块的宽高任意，优雅的溢出。
2、可用于更复杂高级的布局技术中。

缺点：

1、IE9以下不支持。
2、Body需要特定的CSS样式。
3、运行于现代浏览器上的代码需要浏览器厂商前缀。
4、表现上可能会有一些问题