在CSS中div的水平和垂直居中mutliple相对div

Question

我有相对的div作为缩略图，并在鼠标悬停时改变大小。我遇到的问题是，相对div不能在作为内容的div内水平和垂直居中。

这是片段

＆＃13;

＆＃13;

    html { 
        height: 100%; 
    }
    body {
        height:100%;
        min-height: 100%;
        background: white;
        color: white;
        position:relative;
    }
    #header {
        height:170px;
        width:100%;
        top:0px;
        left:0px;
        background: #1b1b1b;
        position:fixed;
        text-align: center;
    }
    #footer {
        height:50px;
        width:100%;
        bottom:0px;
        left:0px;
        background: #1b1b1b;
        position:fixed;
    
    }
    #content {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: border-box;
        width: 100%;
        position: fixed;
        top: 170px;
        left: 0;
        bottom: 50px;
        color: black;
        border: 5px solid blue;
        overflow: auto;
    }
    #boxes{
        position: relative;
        left: 50%;
        top: 30%;
        transform: translateX(-50%) translateY(-50%);
    }
    #boxes2{
        position: relative;
        left: 50%;
        top: 40%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    #box{
        display: inline-block;
        height: 250px;
        width: 200px;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
        transition: width 2s, height 2s, transform 2s;
    
    }
    
    #box:hover{
        height: 450px;
        width: 350px;
        -webkit-transform: rotate(360deg); /* Safari */
        transform: rotate(360deg);
    }

＆＃13;

  <div id="content">
        
        <div id="boxes">
            <div id="box">
                <img src="" style="width:100%;height: 100%">
            </div>
            <div id="box">
                <img  style="width:100%; height: 100%">
            </div>
            
            <div id="box">
                <img src="" style="width:100%;height: 100%">
            </div>
        </div>
        
        <div id="boxes2">
            <div id="box">
                <img src="" style="width:100%;height: 100%">
            </div>
            <div id="box">
                <img src="" style="width:100%;height: 100%">
            </div>
        </div>     
</div>

＆＃13;

＆＃13;

＆＃13;

如何将相对div垂直和水平居中一个顶部和一个底部？

感谢。

Answer 1

我相信您遇到的问题是您使用width和height来增加尺寸，但是您使用transform来固定元素。

您需要使用scaleX和scaleY的变换来增加尺寸。

＆＃13;

＆＃13;

html { 
    height: 100%; 
}
body {
    height:100%;
    min-height: 100%;
    background: white;
    color: white;
    position:relative;
}
#header {
    height:170px;
    width:100%;
    top:0px;
    left:0px;
    background: #1b1b1b;
    position:fixed;
    text-align: center;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #1b1b1b;
    position:fixed;

}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: border-box;
    width: 100%;
    position: fixed;
    top: 170px;
    left: 0;
    bottom: 50px;
    color: black;
    border: 5px solid blue;
    overflow: auto;
}
#boxes{
    position: relative;
    left: 50%;
    top: 30%;
    transform: translateX(-50%) translateY(-50%);
}
#boxes2{
    position: relative;
    left: 50%;
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
}

#box{
    display: inline-block;
    height: 250px;
    width: 200px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;

}

#box:hover{
    -webkit-transform: rotate(360deg) scaleX(1.75) scaleY(1.8); /* Safari */
    transform: rotate(360deg) scaleX(1.75) scaleY(1.8);
}

＆＃13;

<div id="content">

    <div id="boxes">
        <div id="box">
            <img src="" style="width:100%;height: 100%">
        </div>
        <div id="box">
            <img  style="width:100%; height: 100%">
        </div>

        <div id="box">
            <img src="" style="width:100%;height: 100%">
        </div>
    </div>

    <div id="boxes2">
        <div id="box">
            <img src="" style="width:100%;height: 100%">
        </div>
        <div id="box">
            <img src="" style="width:100%;height: 100%">
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;