Question

我想知道我是否可以得到某人的帮助，因为我在页面中心垂直和水平居中文本时遇到困难。

感谢您抽出宝贵时间，祝您度过愉快的一天。

HTML：

<div class="somethingsimple">
    </p>"...I place importance on honesty and expressiveness when creating for a society that is heavily influenced by art."</p>
</div>

的CSS：

.somethingsimple
{
    position: absolute;
    top: 50%;
    text-align:center;
    margin-left:auto;
    margin-right: auto;
    font-family: font-family: 'Open Sans', sans-serif;
    font-size: 22px;
}

Answer 1

只需将width:100%;添加到somethingsimple，就像这样：

.somethingsimple {
    /* your current "absolute positioning" style properties */
    width:100%;
}

以下是上述代码的jsfiddle：http://jsfiddle.net/6pwth4zv/

Answer 2

你还可以添加这个css -

transform: translateY(-50%);

这会将文本向上移动50％的高度，因此它会垂直居中。 http://jsfiddle.net/ym1tys16/

最后将它水平对齐，你可以使用 -

left: 50%;
transform: translateX(-50%);

对于水平和垂直居中，请使用这样的变换 -

transform: translate(-50%, -50%);

Fiddle Demo

完整摘录 -

＆＃13;

.somethingsimple {
  position: absolute;
  top: 50%;
  text-align: center;
  left: 50%;
  font-family: font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

＆＃13;

<div class="somethingsimple">
  <p>"...I place importance on honesty and expressiveness when creating for a society that is heavily influenced by art."</p>
</div>

＆＃13;

难以集中文本

2 个答案: