Text alignment with css

Question

I am mounting a div with a loading, the problem and I can not align the text below the image and in the center.

The image is aligned as I want, in the center of the page.

Can someone help me?

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
    width:160px;
    height:15px;
    position:absolute;
    top:70%;
    left:48%;
    margin-top:-70px;
    margin-left:-48px;
}

<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>

Answer 1

You can only touch the property bottom in the p, and forget the margins, are not necessary, nor does it have to specify a width in this case, unless you want to force the line break:

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
    text-align: center;
    height: 15px;
    position: absolute;
    top: 0;
    bottom: -80px;
    left: 0;
    right: 0;
    margin: auto;
}

<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>