同时在页面底部和中心放置一个div答案

【问题标题】：Position at the same time a div at the bottom and center of a page同时在页面底部和中心放置一个div
【发布时间】：2018-02-13 02:27:59
【问题描述】：

我正在尝试将<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> 居中但不在底部。我怎样才能两者兼得？

【问题讨论】：

你能发一张图片来说明你想要做什么吗？

标签： html css

【解决方案1】：

要实现这一点，一种选择是使用带有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>

【讨论】：

【解决方案2】：

简单的方法是在绝对div中设置一个带有magin:auto的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>

【讨论】：