Css 如何在完全未知的宽度上垂直对齐div？

我的意思是，如果我有一个高度为200px，宽度为200px的div，我想垂直对齐它（我可以用“margin:auto”水平对齐），但是，有没有一种方法可以在不知道屏幕高度的情况下垂直对齐它

谢谢，对不起，我的英语不是我的母语

编辑：屏幕高度

以下是一个示例，

---

当屏幕太小时，媒体查询将处理图像

.vertcenterdiv {
     position: absolute; 
     background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/27/Square_200x200.svg'); 
     background-position: center center; 
     background-repeat: no-repeat; 
     background-size: 100% auto;  
     height: 200px; 
     width: 200px; 
     top: 50%; 
     left: 50%; 
     margin-top: -100px; 
     margin-left: -100px;
}
@media (max-width: 200px) {
     .vertcenterdiv {
          position: absolute; 
          height: 100%; 
          width: 100%; 
          top: 0; 
          left: 0; 
          margin-top: 0; 
          margin-left: 0;
     }
}

---

使用表格显示将东西居中非常方便…请看以下内容：

请注意，这不是“使用表进行布局”…它只是使用表的显示规则的三个div。没有违反任何语义规则=）

HTML

---

将一个盒子置于另一个盒子的中心：

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

不管盒子的大小

---

外盒可能需要

位置：相对用于内部框的定位工作
 但是如果图像是有响应的，我会有这样的东西：
img{width:100%；max width:524px；}
所以当屏幕宽度较小时，这将不起作用anymore@nick是的，在这种情况下，我建议您使用jQuery；）你知道如何使用jquery吗？当窗口大小低于某个阈值时，你也可以使用媒体查询以不同的方式处理它。@nick我现在正在为你制作一些小提琴。
<div class="table">
    <div class="tr">
        <div class="td">
            <p>Hello! I'm a DOM element. <br>I can be whatever size i want, and still still be in the center of things.</p>
        </div>
    </div>
</div>

body, 
html {
    height:100%
}
.table {
    width: 100%;
    height: 100%;
    display: table;
    background-color: #eee;
}
.tr {
    display: table-row;

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

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