几种常见的水平垂直居中方式

常见的水平垂直居中

（1）已知高度和宽度的元素解决方案1

这是一种不常见的居中方法，可自适应，比方案2更智能，如下：

.item{
    position: absolute; margin:auto; left:0; top:0; right:0; bottom:0; } 

（2）已知高度和宽度的元素解决方案2

.item{
    position: absolute; top: 50%; left: 50%; margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */ margin-left: -75px; } 

（3）未知高度和宽度元素解决方案

.item{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ } 

（4）使用flex布局实现

.parent{
    display: flex; justify-content:center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */ background: #AAA; height: 300px; }