パディングを使用しているときに常に完全に中央揃えにすることは可能ですか？

Question

私はこのようなシンプルなレイアウトがあります。このスタイルシートで

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

は、それに適用される：

.centered { 
text-align: center; 
} 

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

まだ維持しながら、私は.msgクラスのパディングを適用する方法を探しています.msg本文は完全に本文の中央に配置されています。

あなたはこのfiddleで見ることができるように：0のpaddingで

、テキストは常に完全に中央に配置されます。

padding-0

私はすなわち200pxのpaddingを使用する場合は、センタリングはもう完璧ではありません。

padding-200

私はパディングを使用しながら、完璧なセンタリングを保つために何をすべき？

ありがとうございました。

Answer 1

は、位置の組み合わせを使用してこの方法を変革：

* { 
 
    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>

は、それが完全に中央のショーにする背景を追加しました。また、テキストの任意の量で動作します：

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>

は表示するようにタイマーを追加しました。