CSS 如何水平居中一个 iframe

在本文中，我们将介绍如何使用 CSS 将一个 iframe 水平居中。iframe 是 HTML 中的一个标签，用于在网页中嵌入其他网页或内容。

阅读更多：CSS 教程

方法1：使用 margin 属性

使用 margin 属性可以将 iframe 在水平方向上居中。为了实现这个效果，需要将 iframe 的左右 margin 设为 “auto”。

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>水平居中的 iframe</h2>
<div class="center">
  <iframe src="https://www.example.com"></iframe>
</div>

</body>
</html>

在上面的示例中，我们给包含 iframe 的 div 元素添加了一个类名 “center”，然后在 CSS 中设置了该类名的样式。通过将左右 margin 设为 “auto”，该 div 元素的宽度将被撑满，并自动在水平方向上居中。由于 iframe 固定为内联元素，其宽度会根据内容自动调整，所以在 div 元素中嵌套的 iframe 也会实现水平居中的效果。

方法2：使用 Flexbox

Flexbox 是 CSS 的一个布局模块，可以方便地进行灵活的布局。使用 Flexbox 可以轻松地将 iframe 在水平方向上居中。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  justify-content: center;
}
</style>
</head>
<body>

<h2>水平居中的 iframe</h2>
<div class="container">
  <iframe src="https://www.example.com"></iframe>
</div>

</body>
</html>

在上面的示例中，我们给包含 iframe 的 div 元素添加了一个类名 “container”，然后在 CSS 中设置了该类名的样式。通过将 div 元素的 display 属性设置为 “flex”，其内部的元素将自动成为弹性项。通过将 justify-content 属性设置为 “center”，所有的弹性项都将在水平方向上居中对齐。因此，通过使用 Flexbox，我们可以很方便地将 iframe 水平居中。

方法3：使用 Grid

CSS Grid 是另一个用于进行网格布局的模块。使用网格布局可以方便地进行强大的布局操作，包括将元素居中。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  place-items: center;
}
</style>
</head>
<body>

<h2>水平居中的 iframe</h2>
<div class="container">
  <iframe src="https://www.example.com"></iframe>
</div>

</body>
</html>

在上面的示例中，我们给包含 iframe 的 div 元素添加了一个类名 “container”，然后在 CSS 中设置了该类名的样式。通过将 div 元素的 display 属性设置为 “grid”，及 place-items 属性设置为 “center”，该元素及其内部的元素都将在水平方向上居中。