將div垂直對齊到元素的中間

Question

所以基本上，我希望頁面看起來像這樣。 徽標（綠色三角形）為“ images / logo.png”，其他三個框為“用戶名輸入/密碼輸入/提交”按鈕。

我嘗試過的代碼無法正常工作-將其全部壓縮在頁面的左側。

 <div class="login-box">
            <div class="row">
                <div class="col-sm-2">
                    <img src="{{ asset('images/logo.png') }}" />
                </div>
                <div class="col-sm-10">
                    <p align="center">{{ form_widget(form.username, {'attr': {'class': 'form-control', 'placeholder': 'authentication.username'|trans } }) }}</p>
                    <p align="center">{{ form_widget(form.password, {'attr': {'class': 'form-control', 'placeholder': 'authentication.password'|trans } }) }}</p>
                    <p align="center">{{ form_widget(form.log_in, {'attr': {'class': 'btn btn-lg btn-primary btn-block'}, 'label': 'authentication.log.in'|trans }) }}</p>
                </div>
            </div>
        </div>

<style>
    .login-box {
        width: 800px;
        vertical-align: middle;
    }
</style>

我究竟做錯了什么？

謝謝

Answer 1

假設您的父element是視口的height和width的100％。

如果您不介意使用transform屬性，則可以使用幾行代碼輕松地垂直對齊任何元素。

.class {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

您可以添加一個margin: 0 auto; 如果您也想使其水平對齊（並且它是一個塊類型元素）。

小提琴在這里

要將其應用於您的代碼：

• 確保login-box的父login-box是height和width為100%的元素。
• 將上述樣式應用於login-box類。

Answer 2

我已經創建了一個示例示例 ，其中包含一些虛擬數據，但是您將了解如何實現它

.col-sm-2, .col-sm-10 {
min-height: 100vh;
display: flex;
align-items : center;
}

Answer 3

您可以考慮使用col-sm-offset來更改圖像和字段的位置。 嘗試：

<div class="col-sm-2 col-sm-offset-4">
     <img src="{{ asset('images/logo.png') }}" />
</div>
<div class="col-sm-5 col-sm-offset-6">

玩“ col-sm-offset-x”，直到正確定位為止。