使用css实现垂直居中

vartical-align
　　vartical-align可以设置行内元素和表格单元格（table-cell）垂直对方式，所以如果元素是行内元素或者表格的话，可以直接应用这个属性对内容进行对齐设置。如果是块级元素，需要将元素的display设置为table-cell，然后使用vartical-align=center
blockElement{
　 display:table-cell;
　　vartical-align:center；
　}
缺点：table-cell是css3中的属性，所以根据平台的不容可能会有兼容性的问题。具体兼容程序可以在caniuse网站查询。
align-items
align-items是设置伸缩盒中的元素在cross axis（侧轴）方向的放置方式。
通过设置display：flex和align-items：center就可以实现将元素居中。
element{
　　display:flex;
align-items：center;
}
缺点：同样是兼容性问题
justify-content
justify-content是设置伸缩盒中的元素在main axis（主轴）方向的放置方法。主轴是从左到右的，但是通过将flex-direction设置为column可以将主轴改变为上下方向。然后使用justify-content将元素居中。
　　element{
           display: flex;
           flex-direction: column;
           justify-content: center;
       }
绝对定位与相对定位
　　同时使用父元素和子元素的高度，将父元素设置为相对定位，子元素设置为绝对定位。然后通过设置top或bottom值，就可以轻易的将子元素居中；
fatherElement{
　　pisition:relative；/*相对定位*/
　　height：number；
}
element{
position:absolute; /*绝对定位*/
　 top:number;
}
缺点：这种情况的前提就是必须已知父元素和子元素的高度，然后根据差值计算。
绝对定位和负外边距
       这种情况跟上面的区别就是只使用子元素的高度。设置绝对定位的元素top值为50%，子元素的上边缘位于父元素的50%高度，然后使用负外边距将元素向上移动一般子元素高度
fatherElement{
　　position：relative;
}
element{
　　position:absolute;
       top:50%;
       margin-top:-number;/*负值，值为子元素的二分之一高度*/
}
缺点：必须知道被居中元素的尺寸；
绝对定位和transform的translate
这个方法与上一个方法一处不同，就是在设置了top为50%之后，如何将元素向上移动自身高度的一半。css3中的transform转换有移动函数translate（x,y），x和y既可以为数值，也可以为百分数；如果是百分数，表示自身高度*百分数，所以
fatherElement{
　　position：relative;
}
element{
　　position:absolute;
top:50%;
　　transform：translate（0，-50%）；
}
绝对定位和margin：auto
绝对定位的前提下，设置相同的top和bottom值，然后使用margin：auto，可以使元素居中。
fatherElement{
　　position：relative;
}
element{
　　position:absolute;
top:0;
　　bottom:0;
　　margin:auto;
}
这里必须在绝对定位之后，对top和bottom进行赋值，值是多少无所谓，但是必须相等。然后使用margin为auto即可实现居中。
padding
这个道理很简单，就是设置相同的上下内边距，从而使子元素居中。
#divFather{
       width: 400px；
       padding:10px 0;
   }
   #divFather>div{
       width: 100px;
       height: 100px;
   }
　　在没有对父元素设置高度的时候，这个居中实质上是等距离加大padding，从而让元素看起来就是居中的，父元素的内容区高度就是子元素的高度。
使用line-height对单行文本进行居中
设置line-height与容器的高度相同，可以使单行文本居中
div{
       width: 400px;
       height: 200px;
       line-height: 200px;
   }
使用line-height和vertical-align对图片进行居中
<div>
　　<img>
</div>
div{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}
div img {
    vertical-align: middle;
}

秒客网

使用css实现垂直居中

相关文章