块的垂直居中-白红宇

块的垂直居中

阅读量：7071 次

发布时间：2019-06-28

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

需要固定宽高的垂直居中：

一，定位

　　1.1 之absolute

　　写法一：position:absolute;

.one{
                   position:absolute;          width:200px;              height:200px;               top:50%;               left:50%;               margin-top:-100px;               margin-left:-100px;             background:red;   }

　　写法二：margin:auto这个必须要有

.two{
             position:absolute;        width:140px;           height:140px;           top:0;          right:0;       bottom:0;     left:0;      margin:auto;     background:black;}

　　1.2定位之fixed;

　　写法同上。

二，display:table-cell 属性使内容垂直居中

.three{
             display:table-cell;               vertical-align:middle;              text-align:center;          width:120px;              height:120px;          }

三，行内元素的垂直居中line-height.

四，css3

　　4.1，css3的 display:-webkit-box 属性，再设置-webkit-box-pack:center/-webkit-box-align:center;

.one{
             width:90px;         height:90px;     display:-webkit-box;        -webkit-box-pack:center;          -webkit-box-align:center;       background:yellow;    }

　　4.2 ,css3的新属性 transform:translate(x,y) 属性;这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好

.two{
             position:absolute;        width:80px;           height:80px;           top:50%;            left:50%;         transform:translate(-50%,-50%);        -webkit-transform:translate(-50%,-50%);         -moz-transform:translate(-50%,-50%);        -ms-transform:translate(-50%,-50%);         background:green; }

五，:before元素

.one{
                position:fixed;     display:block;   top:0;    right:0;     bottom:0;       left:0;      text-align:center;   background:rgba(0,0,0,.5);}.one:before{
                content:'';             display:inline-block;          vertical-align:middle;           height:100%;}.one .content{
          display:inline-block;          vertical-align:middle;          width:60px;          height:60px;              line-height:60px;          background:yellow;}

六，flex

parentElement{
       display:flex;/*Flex布局*/    display: -webkit-flex; /* Safari */    align-items:center;/*指定垂直居中*/}

不知道高度；

　　一，定位和transform；

　　　　1.1 不知道父与子容器的高度；

parentElement{
     position:relative;}childElement{
     position: absolute;  top: 50%;  transform: translateY(-50%);  -webkit-transform:translate(-50%);         -moz-transform:translate(-50%);        -ms-transform:translate(-50%);  }

　　　　1.2 若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可；

parentElement{
     height:xxx;}.childElement {
     position: relative;  top: 50%;  transform: translateY(-50%);  -webkit-transform:translate(-50%);         -moz-transform:translate(-50%);        -ms-transform:translate(-50%);  }

七，inline-block;

　　#box { height: 400px; background: #c00;}

　　#content, #actor { display: inline-block;

vertical-align: middle;}

　　#content { font-size: 12px; color: #fff;}

　　#actor {

height: 400px;

font-size: 0;}

　　这里黑体字的比较重要；