Question

我试图在<p>内垂直和水平对齐<div>。我在上传大文件时创建了一个加载div。

以下是我的CSS样式：

#divProcessing {
     position:absolute; /* or fixed */
     background-color:rgba(0,0,0,0.6); /* to your preference */
     width:100%;
     height:100%;
     top:0; left:0; bottom:0; right:0; /* not always necessary */
     text-align:center; 
     vertical-align:middle;
};

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
};

这是HTML：

<div id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>

我尝试使用text-align:center;和vertical-align:middle;，但它仍会在页面顶部显示。

有关如何修复它的想法吗？

JSFiddle：https://jsfiddle.net/VansFannel/nkb1zupr/

我尝试过这些答案：https://stackoverflow.com/a/19599207/68571，https://stackoverflow.com/a/20267769/68571和https://stackoverflow.com/a/15121442/68571但没有成功。

Answer 1

尝试一次。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
    .loading {
        position:absolute; /* or fixed */
        background-color:rgba(0,0,0,0.6); /* to your preference */
        width:100%;
        height:100%;
        top:0; left:0; bottom:0; right:0; /* not always necessary */
        text-align:center; 
        display: table;
    }

    .loading p {
        color:#fff;
        font-size:25px;
        text-align:center;
        display: table-cell;
        vertical-align: middle;
    }
</style>
</head>

<body>
<div class="loading" id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>
</body>
</html>

Answer 2

https://jsfiddle.net/nkb1zupr/9/

试试这个。您必须为div指定高度。我现在把它设置为10em。

HTML

<div id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>

CSS

#divProcessing {
     position: relative;
     background-color:rgba(0,0,0,0.6); /* to your preference */
       height: 10em; /* specify a height */
}

#divProcessing p {
   margin: 0;
   position: absolute;               
   top: 50%;                         
   transform: translate(0, -50%);
   margin-left: 33%; 
   margin-right: 33%;
}

Answer 3

加入

#divProcessing p{position:relative; top:50%; text-align:center; margin-top:-15px}

编辑您的代码位置

#divProcessing {
     **position:fixed;** /* or fixed */
     background-color:rgba(0,0,0,0.6); /* to your preference */
     width:100%;
     height:100%;
     padding-top:50%;
     margin-top:-50px;
     top:0; left:0; bottom:0; right:0; /* not always necessary */
     text-align:center; 
     vertical-align:middle;
};

https://jsfiddle.net/v9L9cb81/1/

Answer 4

尝试将一个类放到div中并编辑css文件中包含的每个元素。在你的html中尝试这样：

<div class="loading" id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>

在你的.css中，你会编辑你的＆lt; p>风格：

.loading {
    position:absolute; /* or fixed */
    background-color:rgba(0,0,0,0.6); /* to your preference */
    width:100%;
    height:100%;
    top:0; left:0; bottom:0; right:0; /* not always necessary */
    text-align:center; 
    vertical-align:middle;
}

.loading p {
    color:#fff;
    font-size:25px;
    text-align:center;
    /*You can also try with margin giving a right margin if you prefer*/
}

Centrer在div内垂直和水平对齐<p>

4 个答案: