html - 如何使用 Bootstrap 在页面中间设置水平和垂直

Question

[对不起我的英语] 我只是将我的“ Logo ”水平和垂直居中。 但我想要的是，当我调整浏览器大小时，我的 Logo 会变小一点。我如何在 Bootstrap 中执行此操作？

索引.html

<section>
    <div class="container">
        <div class="bg">
        </div>
    </div>
</section>

屏幕.css

.bg {
    position: absolute;
    background: url("../images/comingsoon.png") no-repeat center center fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

Answer 1

您可以使用视口(viewport)单位⁽¹⁾ vw和 vh与 background-size使背景的大小取决于窗口的宽度和高度

JS Fiddle 1

.bg {
    position: absolute;
    background: url("//placehold.it/400x200/00AA00/ffffff?text=Coming Soon") no-repeat center center fixed;
    background-size:50vw 40vh; /*added this */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color:orange;
    margin: auto;
}

<section>
    <div class="container"><div class="bg"></div></div>
</section>

---

或者你可以使用百分比值，改变上面的background-size行到这个:

background-size:50% 40%;

JS Fiddle 2

来自 MDN - Background-Size :

A <percentage> value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.

---

注意 50vw , 40vh , 50%和 40%只是用于演示目的的值，您可以输入任何您想要的正值。

-------------------------------------------- ----------------------------------

⁽¹⁾ 资源:

• CanIuse - Viewport Units

• MDN - Viewport