css - マージンを残してテキストをセンタリングする CSS

Question

左にマージンしかない div でテキストを中央に配置することは可能ですか? 基本的に、黒いボックスに従ってテキストを中央に配置しますが、赤いボックスの外には出ません。

解決策の 1 つは置くことtext-indent: -25%ですが、ウィンドウのサイズを変更して小さくすると、テキストの一部が非表示になります。

何か案は？

更新:テキストを黒いボックスの中央に配置したいが、赤いボックスの外には出ないようにしたい. そして、右にマージン/パディングは必要ありません

score 2 · Accepted Answer

疑似要素に使用

:after

このcssを書きます

h1 {
    display:block;
    position:relative;
    background: red;
    height: 100px;
    line-height: 100px;
    margin: 0 0 0 0;
    font-size: 2em;
}

h1:after{
content:'';
    left:0;
    top:0;
    bottom:0;
    width:25%;
    position:absolute;
    background:#000;
}

ライブデモ

これに関する詳細情報

疑似要素について