以响应式方式垂直居中文本

在个人网页设计项目上取得了进展，但我一直陷在section的垂直居中p标记中。以响应式方式垂直居中文本

我想这个部分里面的文字垂直居中，但我不希望失去任何响应。我已经尝试了一些可能的解决方案，但我一直在搞这个。你们有没有专家看到一个快速解决？

HTML

<div class="box"> 
    <section> 
    <p>Some text</p> 
    </section> 
</div>

CSS

body { 
    background-color: white; 
    margin: 0; 
    overflow: auto; 
} 

.box { 
    display: block; 
    float: left; 
    height: 100vh; 
    width: 100vw; 
    background-color: green; 
    position: relative; 
} 

.box section { 
    display: block; 
    text-align: center; 
    height: 20%; 
    width: 70%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    border: solid .2em white; 
} 

.box section p { 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    position: absolute; 
} 


} 

}

肯定有多余的CSS在那里（部分是由于从我拿了这一点的项目文物），但这个问题我有能可见。

来源

2017-02-23 Inkidu616

哪来的问题，它的中心？ – Johannes

我希望文本在节中垂直居中。所以距顶部和底部边界的距离相等。 – Inkidu616

啊对不起，我想过这个款本身... – Johannes

这里是中心的事情一个很好的资源 - https://www.w3.org/Style/Examples/007/center.en.html

使用现有的CSS，你可以在p元素上应用top: 50%; transform: translateY(-50%);垂直居中。

body { 
 
    background-color: white; 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.box { 
 
    display: block; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
.box section { 
 
    display: block; 
 
    text-align: center; 
 
    height: 20%; 
 
    width: 70%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: solid .2em white; 
 
} 
 

 
.box section p { 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    margin: 0; 
 
    position: absolute; 
 
}

<div class="box"> 
 
    <section> 
 
    <p>Some text</p> 
 
    </section> 
 
</div>

您还可以使用display: flex; justify-content: center; align-items: center;在p的父水平居中的p和垂直

body { 
 
    background-color: white; 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.box { 
 
    display: block; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
.box section { 
 
    display: block; 
 
    text-align: center; 
 
    height: 20%; 
 
    width: 70%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: solid .2em white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.box section p { 
 
    margin: 0; 
 
}

<div class="box"> 
 
    <section> 
 
    <p>Some text</p> 
 
    </section> 
 
</div>

来源

2017-02-23 00:12:29

非常感谢！你不知道我用这件东西摆弄多久才能使它起作用。很多要学习。 – Inkidu616

@ Inkidu616不客气，很高兴它帮助:) –

可以使section一个FLE具有以下设置的Xbox容器（这使得所有的包括p标签多余的设置）：

.box section { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 20%; 
    width: 70%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    border: solid .2em white; 
}

完整的解决方案在这里看到：https://jsfiddle.net/7ag8jqtu/

来源

2017-02-23 00:23:21 Johannes

是的，工作:)感谢您的帮助！ – Inkidu616

以响应式方式垂直居中文本

回答

相关问题