Html 从包含div推出的弹性项（屏幕外）_Html_Css_Layout_Bootstrap 4

Html 从包含div推出的弹性项（屏幕外）

html css layout bootstrap-4

Html 从包含div推出的弹性项（屏幕外）,html,css,layout,bootstrap-4,Html,Css,Layout,Bootstrap 4,我正在努力建立一个反应迅速的网站。我希望我所有的div总是在中间。由于某些原因，当我在容器中使用flex属性时，引导卡会脱离屏幕：有没有关于如何正确处理的建议正常屏幕移动屏幕：（我的HTML代码 <body> <div class="container"> <div class="d-flex justify-content-center align-items-center"> <form

我正在努力建立一个反应迅速的网站。我希望我所有的div总是在中间。

由于某些原因，当我在容器中使用flex属性时，引导卡会脱离屏幕：有没有关于如何正确处理的建议

正常屏幕

移动屏幕：（

我的HTML代码

<body>
    <div class="container">
        <div class="d-flex justify-content-center align-items-center">
            <form action="" method="POST">
                {% csrf_token %}
                <div id="smain">
                    <h1> Lets Start</h1>

                    <div class="card-deck">
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="{% static "/images/pc.jpg" %}" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example text to build on the card title bulk of the
                                    card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                        <div class="card" style="width: 18rem;">
                            <img class="card-img-top" src="{% static "/images/dance.png" %}" alt="Card image cap">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example
                                    text to build on the card title and makecontent.
                                </p>
                                <a href="#" class="btn btn-primary">Go
                                    somewhere</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

在子级上使用

margin

，而不是在父级上使用

justify content:center；

html，
身体{
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
}
.container>div{
保证金：自动；
}


让我们开始吧
卡片标题
一些快速示例文本，建立在卡片内容的大部分卡片标题上
卡片标题
一些基于卡片标题和makecontent的快速示例文本。

在子对象上使用

margin

，而不是在父对象上使用

justify content:center；

html，
身体{
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
}
.container>div{
保证金：自动；
}


让我们开始吧
卡片标题
一些快速示例文本，建立在卡片内容的大部分卡片标题上
卡片标题
一些基于卡片标题和makecontent的快速示例文本。

谢谢你，它成功了！你能给我解释一下发生了什么吗？为什么会脱离屏幕？@SnirBenYosef Flexbox进行真正的居中，它不在乎内容是否高于父级，它将保持居中，

margin:auto；

但是将消耗从元素边缘到父级边缘的剩余空间。谢谢它成功了！你能解释一下发生了什么吗？为什么会脱离屏幕？@SnirBenYosef Flexbox进行真正的居中，它不在乎内容是否高于父级，它将保持居中，

margin:auto；

但是将消耗从元素边缘到父级边缘的剩余空间。

body {
    background-image: url("{% static "images/unnamed1.jpg" %}");
    background-size: cover;
    background-repeat: no-repeat;
}

html,
body {
    height: 100%;
}
.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}