CSS布局-垂直居中问题

转载

mb5fd868b989ae9 2017-09-04 11:43:00

文章标签 垂直居中 css3 宽高 html 前端页面 文章分类 代码人生

在前端页面的布局方面，很多时候需要用到垂直居中，如果父集元素或子元素的高度是固定的那么垂直居中可以用line-height或者定位 top：50%；margin-top：- height/2 px；实现，那么如果父元素的高度和子元素的高度都不是固定值呢？

下面就总结一下使用css进行垂直居中布局的方法及使用环境。最好用的在最后。

html 使用如下：

<div class="parent">

<div class="child"> </div>

</div>

1.父元素高度与子元素高度差值为固定值，对父元素使用padding使子元素居中

当父元素与子元素差值为固定值 H px 时，可以对父元素使用上下边的padding:H/2 px; 把子元素居中。

.parent{
  width:200px;
  height:auto;
  padding:50px 0;
  background-color: #13B202;
}
.child{
  width: 40px;height: 40px;
  margin:0 auto;
  background-color: #000;
}

效果如下：

CSS布局-垂直居中问题_前端页面

2. 父集高度为固定值，父集使用 line-height ，子集使用 display:inline-box ;

对父元素使用line-height：父集的高度；

由于line-height只对行元素有效果，所以改变子元素的display属性为inline-block，这样，行元素即可以有行元素属性，又能够像块元素一样设置宽高。

最后对子元素设置vertical-align: middle; 使其在行高内垂直居中，这样居中布局就实现了。

.parent{
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background-color: #13B202;
}
.child{
  display: inline-block;
  width: 40px;height: 40px;
  vertical-align: middle;
  background-color: #000;
}

效果如下：

CSS布局-垂直居中问题_html_02

3.子元素高度固定，如果需要横向居中，子元素宽度也需固定，对子集使用定位使其居中。

当子元素的高度固定，无论父元素高度如何变化，子元素都可以通过 top:50%; margin-top: - 子元素高度/2 px ;使其垂直居中，这种一般用于父集高度不固定，会随着屏幕高度或者其他因素变化的情况使用，例如弹窗的垂直居中。对于水平方向的居中也一样，使用left：50%；margin-left：-子元素宽度/2 px ；

.parent{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #13B202;
}
.child{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  background-color: #000;
}

效果如下：

CSS布局-垂直居中问题_前端页面_03

4. 父元素高度不固定，子元素高度也不固定。

这种情况下上面列出的都不能使用，当遇到这种情况时确实很让人头疼，不知如何是好，那么使用css3的 box-align 和 box-pack 进行水平居中，使用align-items进行垂直居中。

这种情况下，无论父元素和子元素宽高如何变化，子元素都能够保持水平和垂直居中显示。唯一不足之处就是对于不支持CSS3的浏览器不能使用。

.parent{
    width: 200px;
    height: 200px;
    background-color: #13B202;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.child{
    width: 40px;
    height: 40px;
    background-color: #000;
}