Ustaw na środku elementy <p> w <div class="bg"> np. tak
.bg p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 50px;
/* font-weight: arial; tu masz błąd */
font-weight: bold;
color: white;
opacity: 0;
transition: opacity 1s;
}
dla ciekawszego efektu dodałbym
div.bg {
height: 100vh;
background-color: #ddd;
transition: background 1s; /* TUTAJ */
}