我们如何在绝对定位的 div 中居中 iframe答案

【问题标题】：How can we center an iframe inside an absolute positionned div我们如何在绝对定位的 div 中居中 iframe
【发布时间】：2013-09-24 05:28:31
【问题描述】：

我尝试将iframe 标记放在a 标记中并将其css 设置为text-align:center，但没有成功

编辑对不起，我误导了我有一个iframe

<div>
    <iframe type="text/html" width="640" height="360" src="https://www.youtube.com/..." frameborder="0" allowfullscreen=""></iframe>
    <button type="button">Ajouter la vidéo...</button>
</div>

div 本身是居中的并且有类

width: 500px;
position: absolute;
top: 35%;
left: 30%;
margin-left: -200px;
z-index: 3;

【问题讨论】：

margin: 0 auto; ?如果您发布您的标记，提供建议会更容易。
你的问题和它的描述不匹配..你询问有问题的 DIV 并在描述中描述锚点。你到底想要什么？
给img标签display: inline-block; margin: 0 auto;
@Mr_Green 边距自动不起作用，除非将 img 设置为阻止并分配一些固定宽度
@Mr_Green 对不起，我误导了我没有 img 而是 iframe...

标签： html css css-position center

【解决方案1】：

a是一个内联元素，你需要创建一个block级别元素，因为它是inline，你的img没有空间居中，所以让它成为block或inline-block而不是将text-align: center; 用于a

Demo

注意：如果您使用的是block，它将占用 100% 的空间，如果您是使用inline-block; 你需要为元素指定一些width，否则就没用了

当您更新您的问题时，这里有一个新的demo

【讨论】：

【解决方案2】：

这段代码应该可以解决你的问题：

img{
  display: block;
  margin: 0 auto;
}

【讨论】：

【解决方案3】：

不知道你的 CSS 代码只能让我猜。

a 标签是一个内联元素，它只占用它需要的宽度。因此，在向其添加图像时，宽度将与图像一样宽。 text-align: center 确实有效，但您看不到它。

将您的a 更改为（内联）块可以解决您的问题，请查看此demo。

.imgLink {
    display: inline-block;
    width: 200px;
    text-align: center;
}

【讨论】：