水平垂直居中方法总结-白红宇

水平垂直居中方法总结

阅读量：4621 次

发布时间：2019-06-09

本文共 3511 字，大约阅读时间需要 11 分钟。

工作中经常用到水平垂直居中的方法，尤其是垂直居中，其中有非常多的学问，一直疏于总结，今天儿周末，来review一下：

　　HTML结构：

.container{
               background-color: #4EA46A;            height: 200px;            width:80%;        }        .content{
               height:100px;            background-color: #2E5F3F;          }

绝对居中法（一）一——absolute + margin 负值实现水平垂直居中

.content{
   　　　　　　　　width : 100px;                 position: absolute;              left:50%;              margin-left:-100px;/*content宽度的一半*/              top:50%;              margin-top:-50px;          }

　　限制条件：需要知道元素宽高的值;

　　这里附带一个小的知识点：CSS中margin-top/bottom(padding-top/bottom)百分比以最近的块级祖先元素的宽度而不是高度为基准

绝对居中法（二）absolute + margin：auto 实现水平垂直居中

　　平时蛮多时候都使用 margin:0 auto 来水平居中，但实际上这种方法也可以实现垂直居中，我也是才知道~ 来看看下面的代码:

.container{
               background-color: #4EA46A;            height: 200px;            width:50%;            margin: 100px auto;            position: relative;        }        .content{
               width: 80%;            height:50%;            background-color: #2E5F3F;          }        .content{
               margin: auto;              position: absolute;              top: 0;             left: 0;             bottom: 0;             right: 0;        }

　　这种实现绝对居中方法的工作机制如下所示：

在普通内容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0

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

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

给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto

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

　　table-cell居中

　　使用table的特殊属性——table-cell在设置为vertical-align:middle之后，单元格内容位于所在行中间显示的原理，进行垂直居中；

　　限制：需要为居中元素增加一个额外wrapper：

CSS代码如下：

.container{
               display:table;        }        .contentWrapper{
               vertical-align: middle;            display: table-cell;        }        .content{
               width: 100%;            height:50%;            background-color: #2E5F3F;         }

inline-block居中：

　　CSS-Trick中相应文章 https://css-tricks.com/centering-in-the-unknown/ 通过伪类元素撑开高度，结合inline-block和vertical-align:middle实现垂直居中：

　　其原理如下：


             
      
       What's past is prologue

.container2{
                text-align: center;        }        .container2:before{
                content: '';            display: inline-block;            vertical-align: middle;            height: 100%;            margin-right:-0.25em;/*调整位置*/        }        .content2{
                display: inline-block;            vertical-align: middle;            line-height:40px;            color: #2E5F3F;             border:1px solid #2E5F3F;        }

　　这种方法的优势在于：可以再不知道父元素及子元素的宽度的基础上进行居中

　　限制：当子元素宽度很长，接近100%时将会被挤到顶部（after伪元素）或　挤出容器（before伪元素）

　　　　　需设置如 max-width:calc(100% - 0.5em)的最大宽度进行限制

flex布局

　　使用流体布局之后发现这才是真正的水平垂直居中好嘛？

.container3{
                display: -webkit-box;            display: -webkit-flex;            display: -ms-flexbox;            display: flex;            -webkit-box-align:center;            -webkit-align-items:center;            -ms-flex-align:center;            align-items:center;            -webkit-box-pack:center;            -webkit-justify-content:center;            -ms-flex-pack:center;            justify-content:center;        }

　　默认主轴为横轴：justify-content定义弹性项目在当前行上沿主轴的排列方式，align-items沿侧轴的排列方式

　　限制：兼容问题：IE11+支持

　　常用的水平垂直居中的方式总结这么多先

转载于:https://www.cnblogs.com/Rylai-FE/p/5638355.html

你可能感兴趣的文章