定位一個div

Question

想知道任何人都可以提供幫助，我試圖定位一個div，但它似乎並沒有動。下面是代碼：

.gallery-photos clearfix { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -50px; 
 
} 
 
.gallery-photos { 
 
    padding: 20px; 
 
} 
 
.gallery-photos .big-photo { 
 
    display: block; 
 
    background-color: #ffffff; 
 
    padding: 3px; 
 
    border: 1px solid #e7e7e7; 
 
    margin-right: 210px; 
 
} 
 
.gallery-photos .big-photo img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 
.gallery-photos .photo-thumbnails { 
 
    float: right; 
 
    width: 210px; 
 
} 
 
.gallery-photos .photo-thumbnails .thumbnail { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    width: 30%; 
 
    height: 63px; 
 
    cursor: pointer; 
 
    padding: 3px; 
 
    border: 1px solid #e7e7e7; 
 
    margin-left: 3.33333%; 
 
    margin-bottom: 6px; 
 
    opacity: 0.4; 
 
} 
 
.gallery-photos .photo-thumbnails .thumbnail.current { 
 
    opacity: 1; 
 
    background-color: #ffffff; 
 
} 
 
.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.gallery-photos .photo-thumbnails .thumbnail img { 
 
    display: block; 
 
    width: auto; 
 
    max-height: 100%; 
 
    margin: 0 auto; 
 
}

<div class="gallery-photos clearfix"> 
 
    <div class="photo-thumbnails"> 
 
    <div class="thumbnail current"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/1.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/2.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/3.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/4.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/5.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/6.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/1.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/2.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="images/3.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="big-photo" class="big-photo"> 
 
    <img src="images/1.jpg" alt="" /> 
 
    </div> 
 
</div>

Answer 1

更改這個選擇：.gallery-photos clearfix{到.gallery-photos.clearfix{

爲中心，你可以做到這一點的元素：

.gallery-photos.clearfix{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

Answer 2

試試這個https://jsfiddle.net/2Lzo9vfc/31/

HTML

<div class="gallery-photos clearfix"> 
    <div class="photo-thumbnails"> 
    <div class="thumbnail current"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    <div class="thumbnail"> 
     <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div> 
    </div> 
    </div> 
    <div id="big-photo" class="big-photo"> <img src="http://placehold.it/900x600" alt="" /> </div> 

CSS

.gallery-photos.clearfix{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
} 


.gallery-photos { 
    padding: 20px; 
} 

.gallery-photos .big-photo { 
    display: block; 
    background-color: #ffffff; 
    padding: 3px; 
    border: 1px solid #e7e7e7; 
    margin-right: 210px; 
} 

.gallery-photos .big-photo img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin: 0 auto; 
} 



.gallery-photos .photo-thumbnails { 
    float: right; 
    width: 210px; 

} 

.gallery-photos .photo-thumbnails .thumbnail { 
    float: left; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    width: 30%; 
    height: 63px; 
    cursor: pointer; 
    padding: 3px; 
    border: 1px solid #e7e7e7; 
    margin-left: 3.33333%; 
    margin-bottom: 6px; 
    opacity: 0.4; 
} 

.gallery-photos .photo-thumbnails .thumbnail.current { 
    opacity: 1; 
    background-color: #ffffff; 
} 

.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner { 
    height: 100%; 
    overflow: hidden; 
} 

.gallery-photos .photo-thumbnails .thumbnail img { 
    display: block; 
    width: auto; 
    max-height: 100%; 
    margin: 0 auto; 
} 

Answer 3

如果使用position: absolute，使用父（position: relative你的情況body { position: relative }。如果設置在車身高度和寬度，以及（在body你的情況100vw X 100vh這是全視（整個可視區域）更容易。

html, 
 

 
body { 
 

 
    position: relative; 
 

 
    height: 100vh; 
 

 
    width: 100vw; 
 

 
} 
 

 
.gallery-photos.clearfix { 
 

 
    position: absolute; 
 

 
    top: 50%; 
 

 
    left: 50%; 
 

 
    margin-top: -50px; 
 

 
    margin-left: -50px; 
 

 
} 
 

 
.gallery-photos { 
 

 
    padding: 20px; 
 

 
} 
 

 
.gallery-photos .big-photo { 
 

 
    display: block; 
 

 
    background-color: #ffffff; 
 

 
    padding: 3px; 
 

 
    border: 1px solid #e7e7e7; 
 

 
    margin-right: 210px; 
 

 
} 
 

 
.gallery-photos .big-photo img { 
 

 
    display: block; 
 

 
    max-width: 100%; 
 

 
    height: auto; 
 

 
    margin: 0 auto; 
 

 
} 
 

 
.gallery-photos .photo-thumbnails { 
 

 
    float: right; 
 

 
    width: 210px; 
 

 
} 
 

 
.gallery-photos .photo-thumbnails .thumbnail { 
 

 
    float: left; 
 

 
    box-sizing: border-box; 
 

 
    -moz-box-sizing: border-box; 
 

 
    -webkit-box-sizing: border-box; 
 

 
    width: 30%; 
 

 
    height: 63px; 
 

 
    cursor: pointer; 
 

 
    padding: 3px; 
 

 
    border: 1px solid #e7e7e7; 
 

 
    margin-left: 3.33333%; 
 

 
    margin-bottom: 6px; 
 

 
    opacity: 0.4; 
 

 
} 
 

 
.gallery-photos .photo-thumbnails .thumbnail.current { 
 

 
    opacity: 1; 
 

 
    background-color: #ffffff; 
 

 
} 
 

 
.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner { 
 

 
    height: 100%; 
 

 
    overflow: hidden; 
 

 
} 
 

 
.gallery-photos .photo-thumbnails .thumbnail img { 
 

 
    display: block; 
 

 
    width: auto; 
 

 
    max-height: 100%; 
 

 
    margin: 0 auto; 
 

 
}

<div class="gallery-photos clearfix"> 
 
    <div class="photo-thumbnails"> 
 
    <div class="thumbnail current"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/000/0f0.png&text=IMG" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/0e0/aa0.png&text=IMG" /> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/ff0/07c.png&text=IMG"/> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/4cd/b40.png&text=IMG"/> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/9e0/160.png&text=IMG"/> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/e56/111.png&text=IMG"/> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/05f/7be.png&text=IMG"/> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/6d0/5ae.png&text=IMG"/> 
 
     </div> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <div class="thumbnail-inner"> 
 
     <img src="http://placehold.it/210/fa8/9f0.png&text=IMG"/> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="big-photo" class="big-photo"> 
 
    <img src="http://placehold.it/480x320/000/0f0.png&text=IMG" /> 
 
    </div> 
 
</div>