我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。

我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。

.center {
  left: 50%;
  bottom: 5px;
}

我怎样才能做到这一点?


当前回答

如果需要水平和垂直居中:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

其他回答

如果元素具有宽度和高度,则此解决方案有效

.包装器{宽度:300px;高度:200px;背景色:番茄;位置:相对;}.内容{宽度:100px;高度:100px;背景色:深蓝色;位置:绝对;顶部:0;右:0;底部:0;左:0;边距:自动;}<div class=“wrapper”><div class=“content”></div></div>

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

.容器{位置:相对;}.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轴上工作。或者两者兼而有之,就像我的例子一样。我不能想出一个不起作用的情况。

可以使用calc()将纵横比为1的元素与位置绝对值居中

在下面的示例中,我使用了一个圆,因为它更容易解释和理解,但相同的概念可以应用于任何具有纵横比的形状:1表示宽度和高度相等。(关于纵横比)

:根目录{--直径:80px;}第二部分{位置:绝对;顶部:计算(50%-var(--直径)/2);右:计算(50%-var(--直径)/2);纵横比:1;width:var(--直径);边界半径:100%;背景:蓝色;}<div/>

解释

响应式解决方案

如果您不需要支持IE8或更低版本,这里有一个很好的解决方案,可用于响应设计或未知尺寸。

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.外部{位置:相对;/*或绝对值*//*不必要的样式设置财产*/保证金:5%;宽度:80%;高度:500px;边框:1px纯红色;}.内部{位置:绝对;左:50%;顶部:50%;转换:转换(-50%,-50%);/*不必要的样式设置财产*/最大宽度:50%;文本对齐:居中;边框:1px纯蓝色;}<div class=“outer”><div class=“inner”>我总是居中<br/>无论我有多少文本、高度或宽度<br/>维度或我的父级也不相关</div></div>

这是一个JS Fiddle

线索是,剩下的:50%是相对于父对象的,而平移变换是相对于元素宽度/高度的。

这样,您就拥有了一个完全居中的元素,子元素和父元素都具有灵活的宽度。奖励:即使孩子比父母大,这也能奏效。

您也可以使用此选项垂直居中(同样,父级和子级的宽度和高度可以完全灵活(和/或未知)):

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

请记住,您可能还需要以转换供应商为前缀。例如-webkit转换:translate(-50%,-50%);

这对我有用:

<div class="container><p>My text</p></div>

.container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}