Question

你会如何创建这个，但是百分比而不是像素？基本上所以无论图像大小如何，它总是水平和垂直居中。每当我尝试使用百分比创建时，深色背景完全伸出图像的一侧。

HTML：

<div class="gallery">
<div class="gallery-image">
  <img src="http://37.media.tumblr.com/bddaeb8fe12eda6bb40cf6a0a18d9efa/tumblr_n8zm8ndGiY1st5lhmo1_1280.jpg" width="300" height="200" />

<div class="gallery-text">

<h3>BOOM!</h3>

</div>    
</div>  
</div>

CSS：

.gallery {
    width:300px;
    height:200px;
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    cursor:pointer;
    position: relative;
    display: block;
}

.gallery-text{
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 300px;
    height: 200px; 
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
   vertical-align:middle;
   line-height:200px;
}

.gallery-text:hover{
    opacity: 1;      
}

.gallery-text h3{
    color: white;
    display: inline-table;
   vertical-align:middle;
   line-height:100%;            
}

Answer 1

检查此片段，希望这会对您有所帮助！

＆＃13;

.gallery {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    position:relative;
    width:30%;
    height:30%;
    margin:10px;
}
.gallery-image1{
    position:relative;
    width:50%;
    height:50%;
}
.gallery-image img {
    width:100%;
    vertical-align:top;
}
.gallery-image:after {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    left:0;
    top: 0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.gallery-image:hover:after {
    opacity:1;
}

＆＃13;

<div class="gallery">
<div class="gallery-image">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
  
  <div class="gallery-image gallery-image1">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
</div>

＆＃13;

Answer 2

尝试使用：

display: flex;
justify-content: center;
flex-direction: column;
height: 100%;

在你的.gallery-text上课：）

Answer 3

.main-wrapper {
  display: table;
  width: 100%;
  background: #226699;
}

.img-holder {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 500px;
}

img {
  max-width: 90%;
  max-height: 90%;
  display: inline-block;  
}

<div class="main-wrapper">
  <div class="img-holder">
    <img src="http://placehold.it/1000x1000" />  
  </div>
</div>

Answer 4

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

尝试在.gallery-text课程中使用此css。

使代码更具响应性（文本覆盖图像）

4 个答案: