Положение кнопки с помощью Vue. js

Question

Прошло некоторое время с тех пор, как я начал кодировать, но мне было интересно, как мне расположить кнопку «Вход» в нижней центральной части экрана, чтобы поверх нее отображалось изображение? Спасибо

Код:

<template>

    <div class="container-fluid">
      <img alt="Sportly logo" src="~@/assets/sportly.png">
        <div class="row">
            <div class="col-md-6">
                <h3>Login</h3>
                <button class="btn btn-primary"
                    @click="signIn">
                    <i class="fa fa-twitter"></i>
                    Sign In with Twitter
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        signIn () {
            this.$store.dispatch('signIn')
        }
    }
}
</script>

<style scoped>
h3 {
    font-weight: 700;
}
button {
    background-color: #1dcaff;
    border: 1px solid  #1dcaff;
    positioning: absolute;
bottom: 0px;

}
div button:hover {
    background-color: #00aced;
    border: 1px solid  #00aced;
}
</style>

Answer 1

Ваша проблема - класс col-md-6 . В вашем случае это имеет стиль: {ширина: 50%}. Вы еще один класс, который подходит для вашего случая

Answer 2

Чтобы центрировать элемент, попробуйте:

display: flex; justify-content: center;

или поле: 0 авто;

, но вам нужно изменить col-md-6 на col-md-12