同時在一頁的底部和中間位置的位置

Question

我試圖在同一時間在底部和中心位置<div>。我已經嘗試了許多CSS屬性的組合：margin，top/bottom，margin-top/bottom，absolute/relative/fixed等。

據我瞭解，由於外部容器是位置相對的：

header { 
    position: relative; 
    min-height: auto; 
    text-align: center; 
    color: #fff; 
    width: 100%; 
    background-color: #c9c9c9; 
    background-image: url('shiny-wallpaper-black.jpg'); 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

然後我<div>：

<div style="position: absolute; bottom: 8%; left: 0%; !important"> 
    <div align = Center style=""> Partner with: </div> 
    <a href="http://www.harveymilton.com"> 
     <img src="assets/harveymilton.png" style="width:50%;height:50%"> 
    </a>  
</div> 

如果我把position: absolute然後我得到了<div>在底部，但不居中。如果我更改position: relative則<div>居中，但不在底部。我怎麼能得到這兩個？

Answer 1

簡單的方法是設置與magin一個div：絕對內汽車DIV

body>div { 
 
position:absolute; 
 
bottom:0; 
 
left:0; 
 
width:100%; 
 
} 
 

 
div div { 
 
display:table;/* or widthh:xx;*/ 
 
margin:auto; 
 
border:solid;

<div> 
 
<div>margin:auto + display or width</div> 
 
</div>

Answer 2

爲了實現這一目標，一個選擇是使用包裝元素與display: flex規則，就像這樣：

.wrapper { 
 
    /* bar at the bottom */ 
 
    bottom: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 

 
    /* child items will be horizontally centered */ 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="wrapper"> 
 
    <div>Hello!</div> 
 
</div>