页面元素的垂直居中

• 垂直居中：单行的行内元素解决

 当一个行内元素，inline之类的，可以将他的height和line-height同事设置为父元素的高度即可实现垂直居中效果。

#container{
  background: #222;
  height: 200px;
}
/*  以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
  
  height: 200px;
  line-height:200px;  
  color: #FFF;
}

• 垂直居中：多行的行内元素解决

 组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.container{
  background: #222;
  width: 300px;
  height: 300px;
  /* 以下属性垂直居中 */
  display: table-cell;
  vertical-align:middle;
}

• 垂直居中：已知高度的块状元素解决

定义居中元素的相关属性，如下：

/* 以下为居中代码 */
.item{
  top: 50%;
  margin-top: -50px;
  position: absolute;
  padding:0;
}

• 垂直居中：未知高度的块状元素解决

对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中：

.item{
  top: 50%;
  position: absolute;
  transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}

• 水平垂直居中：已知高度和宽度的元素解决

我们可以设置元素定位为absolute，并且设置top, left绝对值为50%，margin-top和margin-left为元素高度一半的负值即可，如下：

.item{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
}

• 水平垂直居中：未知高度和宽度元素解决

使用类似的transform属性来定义，即可实现，如下：

.item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

• 水平垂直居中：使用flex布局实现

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

 

 

 

 

 

 

转载于:https://my.oschina.net/DukeSwain/blog/1301305