Question

我正在网站上工作：http://felipewarrener.55freehost.com

正如你所看到的那样，有一个内容滑块，我添加了媒体查询以使文本变小，并且框的宽度也会缩放（我最终会使文本足够小，这样它就不会使框大于容器格。

但是，我不知道如何将这些盒子垂直居中？当我缩小它时，它们需要垂直居中，否则它们只会向下浮动。

他们相对定位，因为我觉得这是最好的选择

有人可以建议或告诉我应该使用哪种方法吗？

感谢您花时间阅读

菲利普

Answer 1

你可以使用flex

.container { 
display: flex; 
flex-wrap: wrap; 
justify-content: center;
align-items: center;
align-content: center; 
width: 400px;
height: 400px;
border: 1px solid black;
}
.content {
  width: 200px;
  height: 200px;
  background-color: green;
}

<div class="container">
  <div class="content">
  </div>
</div>

Answer 2

如果您正在谈论您的＆＃34;着色PVC＆＃34;的新维度，你可以做的是让标题容器relative定位，然后给你的文本这个类：

.vert-centered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

非常确定您的文字是向下浮动以防止重叠。当屏幕宽度太小时，你也可以隐藏它。

如何在一个宽度固定的盒子里面改变宽度的盒子？

2 个答案: