html - 中心和底部 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

这是一个 fiddle 如果需要，也可以使用 Bootstrap 。

 <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;
}