javascript - 中心 div，里面有文字

Question

我有一个带有以下 css 的 div 元素，我需要将其置于父容器的中心:

 <div id='download_confirm'>DOWNLOAD STARTED</div>

.download_confirm{
    position:absolute;
    top:0px;
    left:0px;
    padding:10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;

    background:#ccc;

}

我怎样才能做到这一点？

Answer 1

首先，将 position:relative 指定给 div 的父元素。

1) - 如果您希望此 div 水平和垂直居中，则:

.download_confirm{
    position:absolute;
    width:200px;
    height: 90px;
    top:50%;
    left:50%;
    padding:10px;

    margin-top: -45px;
    margin-left: -100px;

    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;

    background:#ccc;
}

.

2) - 如果您希望您的 div 仅水平居中，则:

.download_confirm{
    position:absolute;
    width:200px;
    height: 90px;

    padding:10px;
    margin: 0 auto;

    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;

    background:#ccc;
}