如何使用Bootstrap 5实现Embed元素的水平居中

你的核心问题是：外层容器通过position-absolute top-50 start-50 translate-middle实现了自身的屏幕居中，但容器内部的图片和表单元素没有设置水平居中规则，导致图片默认左对齐。

以下是几种简单有效的修复方案：

方案1：给图片添加块级+自动边距类 #

直接给<embed>标签添加d-block mx-auto类，将图片转为块级元素并设置左右margin自动，实现水平居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
    <div class="container position-absolute top-50 start-50 translate-middle">
        <!-- 添加d-block mx-auto类实现图片居中 -->
        <embed class="logo d-block mx-auto" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
        <form action="/streams" method="POST">
            <div class="input-group">
                <input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
                <button class="btn btn-danger" type="submit" id="start-button">Click</button>
            </div>
        </form>
    </div>
</body>
</html>

方案2：给外层容器添加文本居中类 #

如果希望容器内所有行内/行内块元素都居中，给外层<div>添加text-center类，同时给表单添加d-inline-block避免占满整行：

<div class="container position-absolute top-50 start-50 translate-middle text-center">
    <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
    <form action="/streams" method="POST" class="d-inline-block">
        <div class="input-group">
            <input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
            <button class="btn btn-danger" type="submit" id="start-button">Click</button>
        </div>
    </form>
</div>

方案3：使用Flex布局垂直排列并居中 #

利用Bootstrap的flex工具类，让容器内部元素垂直排列且水平居中，同时通过gap-3控制图片和表单的间距：

<div class="container position-absolute top-50 start-50 translate-middle d-flex flex-column align-items-center gap-3">
    <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
    <form action="/streams" method="POST">
        <div class="input-group">
            <input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
            <button class="btn btn-danger" type="submit" id="start-button">Click</button>
        </div>
    </form>
</div>

这三种方案都能解决图片居中问题，其中方案3的flex布局更适合灵活控制垂直方向的元素间距。

内容的提问来源于stack exchange，提问作者Diego Borba