CSS 居中文本，留有边距

Question

检查这个jsfiddle

是否可以在只有左边距的 div 中居中放置文本？基本按照黑框居中，不超出红框。

一个解决方案是放置 text-indent: -25% 但是当我们调整窗口大小并使其变小时，文本的某些部分将被隐藏。

有什么想法吗？

更新:我希望文本以黑框为中心，但不要超出红框。而且我不希望右边有任何边距/填充

Answer 1

用于伪元素

: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;
}

Live Demo

有关 的更多信息 this

About Pseudo-elements