中心和底部div成为父div

Question

我试图居中并将底部固定在另一个div内的div中，我正在尝试使用这一部分而不是成功，有人可以帮我完成这个吗？

#clockPosition {
    margin: auto auto 0 auto;
    width: 30%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.parent-column {
    margin: 1%;
}

<div class="parent-column">
     <>
    <div id="clockPositon">Content here</div>
</div>

以下是我想要最终结果的图片：

提前致谢：）

Answer 1

您的版本失败主要是因为定位顶部，底部等需要div绝对定位，您没有定义。通过使内部绝对（和设置底部）和父亲相对（如绝对是相对于父亲），那么你将是好的去。

相对于父div的位置： HTML：

<div class="outside">
   <div class="inside">Center and bottom">
</div>

CSS：

.outside {
    width: 500px;
    height: 500px;
    position: relative;
}
.inside {
    position: absolute;
    bottom: 1px;
    left: 50%;
    margin-left: -40%;
    height: 20px;
    width: 80%;
}

只需将div固定在页面底部，无论父元素如何：

.foot-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
}

最后，要做一个粘页脚，它是页面的一部分，但总是在底部，除非页面长于一个屏幕（我的首选方法是自适应大小的固定页脚）

http://ryanfait.com/sticky-footer/

Answer 2

如果您需要，还可以使用引导程序 fiddle 。

 <div class="parent-column col-md-5">
    <div id="clockPosition">Content here</div>
</div>

#clockPosition {
    width: 30%;
    position:absolute;
    text-align:center;
    bottom: 5px;
    border: 1px solid red;
    left: 50%;
    transform: translate(-50%, 0);
}
.parent-column {
    margin: 1%;
    height: 300px;
    width: 80%;
    position:relative;
    border: 1px solid red;
}