Question

我有一个段落，我想垂直居中于div ...

这个应该是一个足够简单的东西，但我正在使用一个响应式字体mixin，它动态地缩放文本字体大小与容器宽度的关系。

如何将文本置于其父div中，文本本身会改变大小？

body
{
background-color: #fcfcfc;
}
.center-div
{
position: relative;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: 1400px;
height: 50vh;
background-color: #ccc;
border-radius: 3px;
text-align: center;
} 


//Padding for mobile screens
@media (max-width: 500px){
.col-md-12{
padding-left: 5%;
padding-right: 5%;
}
}
//Padding for small-medium screens
@media (min-width: 501px){
.col-md-12{
padding-left: 15%;
padding-right: 15%;
}
}
//Responsive body text
.center-div p{
@include responsive-font(1.5vw, 16px, 38px);
margin-top: 5px;
}

非常感谢任何帮助/建议/建议！

Answer 1

如果您使用flexbox，则更简单：

.center-div {
  display: flex;
  align-items: center;
}

Answer 2

应该这样做..

.center-div p{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

https://codepen.io/anon/pen/ORKGQq

Answer 3

您可以使用flexbox来实现整洁的方式。

.center-div{
 display: flex;
 align-items: center;
}

以下是笔：explained here

div中的垂直中心段

我有一个段落，我想垂直居中于div ...

3 个答案: