How to fill in "spare spaces"

Question

Good afternoon, I am developing a site, and in it is having a problem of a div with 100% width and height, Absolute position. The problem is that div is not fully filling her space. While doing some tests using the same Browser Debugger, I checked that if I removed the "Display: Table" property from the parent div it would solve the problem and solved it, the problem is that the text within the daughter div has to be aligned vertically in the middle. But how to resolve this without removing the property?

Screenshots:

The last image is with more highlighted colors(That small space in red is the space I talked about).

HTML:

<div class="destaque-galeria">
    <div>
        <img src="admin/upload_photo/imagens/thumbnail@2x/f257249f569ad165c66f2a76a3bb183e.jpeg">
    </div>
    <div>
        <img src="admin/upload_photo/imagens/thumbnail@2x/6425a30e41cbb154a40cfa89a4a60191.jpeg">
    </div>
    <div>
        <a href="Javascript:void(0);" data-toggle="modal" data-target="#modal-destaque" onclick="getDestaque(32, 58)">
            <img src="admin/upload_photo/imagens/thumbnail@2x/844beefee8b3efb3f42db04c9eb1a2ce.jpeg">
            <div class="galeria-vejaMais">
                <span>+ 7</span>
            </div>
        </a>
    </div>
</div>

CSS:

.destaque-galeria {margin-top: 10px;}
.destaque-galeria>div{
    width: calc(33.33% - 5px);
    margin: 0 2.5px;
    float: left;
    height: 60px;
}
.destaque-galeria>div:first-of-type{
    width: calc(33.33% - 5px);
    margin: 0 5px 0 0;
}
.destaque-galeria>div:last-of-type{
    width: calc(33.33% - 5px);
    margin: 0 0 0 5px;
    float: right;
    position: relative;
}
.destaque-galeria>div>a>.galeria-vejaMais {
    background-color: rgba(209, 154, 97, 0.6);
    height: 100%;
    width: 100%;
    position: absolute;
    display: table;
    top: 0;
    left: 0;
    text-align: center;
}
.galeria-vejaMais span{
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    vertical-align: middle;
    display: table-cell;
}

Answer 1

Face the way you set up the layout could be better. The way I’m going to suggest you won’t need to mess with the structure of HTML and will replace the display:table for display:flex, and will use the properties of flex for vertical and horizontal alignment.

.destaque-galeria {margin-top: 10px;}
.destaque-galeria>div{
    width: calc(33.33% - 5px);
    margin: 0 2.5px;
    float: left;
    height: 60px;
}
.destaque-galeria>div:first-of-type{
    width: calc(33.33% - 5px);
    margin: 0 5px 0 0;
}
.destaque-galeria>div:last-of-type{
    width: calc(33.33% - 5px);
    margin: 0 0 0 5px;
    float: right;
    position: relative;
}
.destaque-galeria>div>a>.galeria-vejaMais {
    background-color: rgba(255, 130, 0, 0.6);
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    /* alinha na horizontal no centro */
    justify-content: center;
    /* alinha na vertical no centro */
    align-items: center;
    left: 0;
    top: 0;
    text-align: center;
}
.galeria-vejaMais span{
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    vertical-align: middle;
    display: table-cell;
}

<div class="destaque-galeria">
    <div>
        <img src="admin/upload_photo/imagens/thumbnail@2x/f257249f569ad165c66f2a76a3bb183e.jpeg">
    </div>
    <div>
        <img src="admin/upload_photo/imagens/thumbnail@2x/6425a30e41cbb154a40cfa89a4a60191.jpeg">
    </div>
    <div>
        <a href="Javascript:void(0);" data-toggle="modal" data-target="#modal-destaque" onclick="getDestaque(32, 58)">
            <img src="admin/upload_photo/imagens/thumbnail@2x/844beefee8b3efb3f42db04c9eb1a2ce.jpeg">
            <div class="galeria-vejaMais">
                <span>+ 7</span>
            </div>
        </a>
    </div>
</div>