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

Answer 2

如果没有宽度或高度，那么这就是解决方案，

这将div position:absolute与relative 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>，

{{1}}

和check this:Absolute Horizontal And Vertical Centering In CSS非常有用。

你只需要这个，就这么简单，不需要知道宽度，高度，没什么：

Answer 3

如果你只想要横向中心，那么给你的div宽度并将左右边距设置为auto。失去位置，顶部和左侧的css线。

但是如果你想要垂直和水平中心，我建议使用javascript来获取视口大小，然后设置左侧和顶部位置。更简单的解决方案是使用bootstrap或其他一些框架警报插件。

请参阅： http://getbootstrap.com/index.html 要么 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

中心div里面有文字

4 个答案: