最好和最灵活的方式

这个演示的主要技巧是，在元素从上到下的正常流中，因此margin-top: auto被设置为零。然而，绝对定位元素对于自由空间的分布具有相同的作用，并且类似地可以在指定的顶部和底部垂直居中(在IE7中不起作用)。

这个技巧适用于任何大小的div。

div { 宽度:100 px; 身高:100 px; 背景颜色:红色; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; ｝ < div > < / div >

2018年使用CSS网格的方式:

.parent{
    display: grid;
    place-items: center center;
}

检查浏览器的支持，Caniuse建议它适用于Chrome 57、FF 52、Opera 44、Safari 10.1和Edge 16。我没有检查自己。

请看下面的片段:

.parent { 显示:网格; 放置物品:中心中心; /*place-items是align-items和justification -items的简写*/ 身高:200 px; 边框:1px纯黑色; 背景:gainsboro; ｝ .child { 背景:白色; ｝ < div class = "父" > < div class = "孩子" >为中心!< / div > < / div >

我知道我迟到了，但是这里有一种方法可以将一个维度未知的div集中在一个维度未知的父元素中。

风格:

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>

HTML:

<div class="table">
    <div class="table-cell"><div class="centered">centered</div></div>
</div>

演示:

看看这个演示。

I'm surprised this has not been mentioned yet, but the simplest way to do this would be by setting the height, margin (and width, if you want) using viewport sizes. As you might know, total height of the viewport = 100vh. Say you want the height of you container to occupy 60% (60vh) of the screen, you can divide the rest (40vh) equally between the top and the bottom margin so that the element aligns itself in the centre automatically. Setting the margin-left and margin-right to auto, will make sure the container is centred horizontally.

.container { 宽度:60大众;/ *可选* / 高度:60 vh; 利润率:20vh auto; 背景:# 333; ｝ < div class = "容器" > < / div >

实际上有一个解决方案，使用css3，它可以垂直居中一个未知高度的div。诀窍是将div向下移动50%，然后使用transformmy将其移回中间。唯一的前提条件是要居中的元素有一个父元素。例子:

<div class="parent">
    <div class="center-me">
        Text, images, whatever suits you.
    </div>
</div>

.parent { 
    /* height can be whatever you want, also auto if you want a child 
       div to be responsible for the sizing */ 
    height: 200px;
}

.center-me { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

所有主流浏览器和ie9及以上版本都支持(别担心ie8，因为它在今年秋天和winxp一起死了。感谢上帝)。

JS小提琴演示

如果你知道div的定义大小，你可以使用calc。

实例:https://jsfiddle.net/o8416eq3/

注意:只有当你在CSS中硬编码了' ' div '的宽度和高度时，这才有效。

目标# { 位置:固定; 顶部:calc(50vh - 100px/2); 左:calc(50vw - 200px/2); 宽度:200 px; 身高:100 px; 背景颜色:红色; ｝ < div id = '目标' > < / div >