Html 在不使用绝对定位的情况下将div垂直居中？

我想要一个div垂直和水平居中。但是，当我使用包装器

（相对）-->container（绝对）

解决方案时，底部的页脚会一直推到屏幕顶部，然后我根本无法移动页脚。那么，我如何在不使用绝对定位的情况下，将棕色方框垂直和水平居中

HTML:

您可以使用：

.element {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

---

..对于包装器元素

要使元素水平和垂直居中而无需绝对定位，可以使用CSS属性：

transform

，值为

translate（）

，并结合

相对

定位

例如，相对定位的图元可以这样移动：

`transform: translateY(20px);`

这将在“Y”轴上向下移动元素20px

为了使元素垂直居中，我们实际上做了两次移动

将元素向下移动到父元素高度的一半（或50%）

将元素向上移动到其自身高度的一半（或-50%）

最终结果是一个完全居中的元素，而不考虑任何换行或多行文本

.parent{transform style:preserve-3d；}

用于在

translate

将元素放置在“半像素”上时防止元素变得模糊

进一步阅读位于

.parent{
高度：150px；宽度：300px；背景：ddd；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
}
.垂直和水平居中{
背景：白色；
宽度：200px；
位置：相对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
div{border:2px solid#bbb；padding:0.5em；}

在其父对象内垂直和水平居中。

侧注： 请注意，

.element

的父元素必须显示为表格（

display:table；

）父元素的高度也必须定义（显然）

---

你能把你的代码放在问题中吗？是的，我添加了一些HTML和CSS。我没有包括整个代码b/c它太长了，但如果有必要，我会的。谢谢可能是重复的感谢，但如果您不知道父元素的确切高度该怎么办。例如，我希望父元素随着内容的增长而扩展。

.element {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

`transform: translateY(20px);`

.element-parent {
  display: table;
  height: 100%;
}

.element {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}