中心div内含文字

Question

I have a div element with following css and I need to center this inside parent container:

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

}

How can I achieve that?

Answer 1

First, give position:relative to you div's parent element.

1) - if you want this div to be centered horizontally and vertically, then:

.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) - if you want your div to be centered only horizontally, then:

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

Answer 2

if there is no width or height,then this will be the solution,

This will position the div with position:absolute in relative with the parent div ,

.download_confirm{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;

    padding:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;
    background:#ccc;
}
<div class="download_confirm">DOWNLOAD STARTED</div>

and check this:Absolute Horizontal And Vertical Centering In CSS very useful.

You just need this, it's that simple, no need to know widths, heights, nothing:

Answer 3

if you only want horizontail center then give your div a width and set left and right margins to auto. Lose the posistion, top and left css lines.

but if you want vertical and horizontal center i suggest javascript to get viewport size and then set left and top positions. Easier solution is to use bootstrap or some other frameworks alert plugin.

See: http://getbootstrap.com/index.html or http://jqueryui.com/

.download_confirm{

width: 100px;
margin: 0px auto;
padding:10px;

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

background:#ccc;

}

Answer 4

使用＃选择一个ID而不是一个表示类选择的句点，然后将width和margin-left和margin-right设置为auto