这适用于您希望在容器元素中心具有的绝对定位元素的任意未知宽度：

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

我首选的定心方法：

position: absolute;
margin: auto;
width: x%

绝对块元素定位保证金自动左/右、上/下相同

一个JSFiddle在这里。

我知道这个问题已经有了一些答案，但我从来没有找到一个能在几乎所有的类中都适用的解决方案，它也很有意义，而且很优雅，所以这里是我经过调整后的看法：

.容器{位置：相对；}.container.cat链接{位置：绝对；左：50%；顶部：50%；变换：translate3d（-50%，-50%，0）；z指数：100；文本转换：大写；/*强制CSS将其视为文本，而不是纹理，这样就不会出现更模糊的错误*/背景色：白色；}.色块{高度：250px；宽度：100%；背景色：绿色；}<div class=“container”><a class=“cat link”href=“”>类别</a><div class=“color block”></div></div>

这是说给我一个顶部：50%，左侧：50%，然后在X/Y轴上变换（创建空间）到-50%的值，在某种意义上“创建镜像空间”。

因此，这会在div的所有四个点上创建一个相等的空间，它始终是一个长方体（有四条边）。

这将：

工作时不必知道父对象的高度/宽度。致力于响应。在X轴或Y轴上工作。或者两者兼而有之，就像我的例子一样。我不能想出一个不起作用的情况。

响应式解决方案

假设div中的元素是另一个div。。。

此解决方案运行良好：

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

容器可以是任何大小（必须是相对位置）：

.container {
    position: relative; /* Important */
    width: 200px; /* Any width */
    height: 200px; /* Any height */
    background: red;
}

元素（div）也可以是任何大小（必须小于容器）：

.center {
    position: absolute; /* Important */
    top: 50%; /* Position Y halfway in */
    left: 50%; /* Position X halfway in */
    transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
    width: 100px; /* Any width */
    height: 100px; /* Any height */
    background: blue;
}

结果将是这样的。运行代码段：

.容器{位置：相对；宽度：200px；高度：200px；背景：红色；}.中心{位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；宽度：100px；高度：100px；背景：蓝色；}<div class=“container”><div class=“center”></div></div>

我觉得这很有帮助。

#container
{
  position: relative;
  width: 100%;
  float: left
}

#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

这里有一个有用的jQuery插件来实现这一点。我在这里找到的。我不认为纯粹使用CSS是可能的。

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height();
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
            el.css(css)
    });
};