图片垂直居中 css-借助css实现元素垂直居中的解决方案汇总

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言

元素的垂直居中也是我们日常网页布局中经常遇到的问题。 本文主要向大家介绍通过CSS设置元素垂直居中的解决方案。 遇到过这个问题的同事已经带来了一些帮助，下面就不多说了，我们一起来看看详细的介绍。

html代码：

Text here

既然设置了子元素的垂直中心，那么就需要知道父元素的高度，这样才能知道所谓的中间在哪里，对吧？ 如果你想站在一段距离的中间，你首先需要知道这个距离有多长，你才能知道中间的位置在哪里。

注意，我所有的高宽比例都是根据html的设置，body{width: 100%; height: 100%;}图片垂直居中 css，如果不设置这个图片垂直居中 css，.parent的div的父元素又是body了，如果不设置body的宽高，可能看不到效果。 .parent div 的高宽比是相对于其父元素而言的，因此使用时需要确认 .parent div 的父元素设置了 .parent div 的长和高。

(1) 行内文本垂直居中

CSS代码：

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.child {
    line-height: 100px;
}

（2）行内非文本垂直居中（以img为例）

html代码：

CSS代码

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.parent img {
    //注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果.
    line-height: 100px;
}

(3) 未知高度的块级元素垂直居中

html代码：

  

    
    sddvsds dfvsdvds
  

第一种方式（无需添加padding）：

CSS代码：

.parent {
  width: 100%;
  height: 100%;
  position: relative;
  /*display: table;*/
}
.child {
  width: 500px;
  border: 1px solid #ccc; /*设置border是为了方便查看效果*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

第二种方式（不使用变换）：

CSS代码：

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}
.child {
  width: 500px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
}

第三种方式（需要添加padding）：

CSS代码：

#parent {
  padding: 5% 0;
}
#child {
  padding: 10% 0;
}

第四种方式：

（使用display:table，该方法也适用于内联文本元素居中）：

CSS代码：

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

第五种方式（flex布局，这里一定要考虑兼容性！）

CSS代码：

.parent {
    width: 100%;
    height: 100%; /*这里一定要写高度奥!*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

(4) 已知高度的块级元素垂直居中

html代码：

  

    
    sddvsds dfvsdvds
  

CSS代码：

#parent {
  height: 300px;
}
#child {
  height: 40px;
  margin-top: 130px; /*这个只为父元素的高度减去这个元素的高度除以二计算得到的*/
  border: 1px solid #ccc;
}