Ist es möglich, einen Text immer perfekt zentriert zu haben, während Padding verwendet wird?

Question

Ich habe ein einfaches Layout wie folgt aus:

<div class="centered"> 
<p class="msg">This is an important message</p> 
</div> 

mit diesem Blatt Stil auf sie angewendet: noch

.centered { 
text-align: center; 
} 

.msg { 
border: 1px solid red; 
color: red; 
display: inline-block; 
padding: 200px; 
} 

ich nach einer Möglichkeit, eine Polsterung auf der .msg Klasse anzuwenden unter Beibehaltung der Text .msg perfekt im Körper zentriert.

Wie Sie in diesem fiddle sehen:

Mit einem padding von 0, wird der Text immer perfekt zentriert.

padding-0

Wenn ich eine padding von d.h 200px verwenden, ist die Zentrierung nicht mehr perfekt.

padding-200

Was soll ich tun, perfekte Zentrierung zu halten, während Polsterung mit?

Vielen Dank für jede Hilfe.

Answer 1

eine Kombination von Position einsetzen und sich auf diese Weise:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, body, .centered { 
 
    height: 100%; 
 
} 
 
.centered { 
 
    position: relative; 
 
} 
 
.msg { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #f90; 
 
}

<div class="centered"> 
 
    <p class="msg">This is an important message</p> 
 
</div>

Added Hintergrund ist es zu zeigen, ist perfekt zentriert. Es funktioniert auch mit jeder Menge Text:

window.onload = function() { 
 
    setTimeout(function() { 
 
    message.innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."; 
 
    }, 1000); 
 
};

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, body, .centered { 
 
    height: 100%; 
 
} 
 
.centered { 
 
    position: relative; 
 
} 
 
.msg { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #f90; 
 
}

<div class="centered"> 
 
    <p class="msg" id="message">This is an important message</p> 
 
</div>

Added ein Timer zu zeigen.