Question

我很难得到一个div（或里面的文字）来到垂直中心。通常情况下，我可以毫不费力地将div从页面顶部变为特定百分比，但是以某种奇怪的方式，%部分会被完全忽略。

这是我项目的一个非常愚蠢的版本，但它仍然与margin-top混淆。

我的目标是始终在页面的垂直中间放置大文本。我有一种感觉，我实际上接近这完全是错误的。

HTML

<div class="col-md-12 top-text">
    <span class="top-title">Billetten <br /> Tjekliste</span>
</div>

CSS

.top-text {
    text-align: center;
    color: #000;
    height: 10px;
    margin-top:50%;
}

span.top-title {
    font-family: 'art', helvetica, arial, sans-serif;
    font-size: 180px;
    line-height: 1em;
    display: inline-block;
    -webkit-transform: rotate(-10deg) skew(-10deg, 0);
    -moz-transform: rotate(-10deg) skew(-10deg, 0);
    -ms-transform: rotate(-10deg) skew(-10deg, 0);
    -o-transform: rotate(-10deg) skew(-10deg, 0);
    transform: rotate(-10deg) skew(-10deg, 0);
}

Answer 1

我通常做的是垂直居中，将它们的位置设置为绝对值，给它一个50％的最高值，然后通过用负50％（称为它们自己的宽度）进行平移来再次将它们向上拖动。 / p>

这是一个小提琴：http://jsfiddle.net/y1muc7gr/1/

span.top-title {
    font-family: 'art', helvetica, arial, sans-serif;
    font-size: 180px;
    line-height: 1em;
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    -webkit-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
    -moz-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
    -ms-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
    -o-transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
    transform: rotate(-10deg) skew(-10deg, 0) translateY(-50%);
}

Answer 2

你忘了减去半个文字的高度。

http://jsfiddle.net/y1muc7gr/2/

.top-text {
text-align: center;
color: #000;
height: 10px;
margin-top:-180px;
position: absolute;
top : 50%;
}

Answer 3

是你想要的吗？我做了这个jsfiddle 在顶部标题中添加位置：相对和底部：200px;根据你想要的位置改变它

span.top-title {
position:relative;
font-family: 'art', helvetica, arial, sans-serif;
font-size: 180px;
line-height: 1em;
display: inline-block;
-webkit-transform: rotate(-10deg) skew(-10deg, 0);
-moz-transform: rotate(-10deg) skew(-10deg, 0);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0);
transform: rotate(-10deg) skew(-10deg, 0);
bottom:200px;

}

http://jsfiddle.net/y1muc7gr/5/

Answer 4

jsfiddle example

使用table-cell设置容器，可以为其提供垂直对齐属性，使文本居中。

.top-text {
    text-align: center;
    color: #000;
    height: 600px;
    display: table-cell;
    vertical-align: middle;
}

唯一的问题是你应该有一个固定高度的容器。

页面上的垂直居中文本

4 个答案: