Выровнять изображение внутри фона кнопки

Question

Я создаю страницу с кнопками, на которых есть изображения. Логотипы должны быть в центре кнопки и отображаться только один раз. Я пытаюсь показать их в DIV, чтобы изображения не были доступны непосредственно на странице.

Вот что у меня получилось ...

.google-button {
    width: 200px;
    height: 50px;
    padding: 0;
    margin: 0;
    background-color: #000000;
    border: 5px solid #000000;
    border-radius: 0;
}

.google {
    height: auto;
    width: auto;
    text-align: center;
    background-size: 100%;
    object-size: contain;
    background: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png') no-repeat;
}

<button class="google-button">
  <div class="google"></div>
</button>

Любые идеи будут оценены. Мне просто нужно, чтобы lo go был горизонтально и вертикально выровнен внутри кнопки.

Заранее спасибо:)

UPDATE

Вот прогресс, который я сделал.

.google-button {
    width: 100%;
    height: 80px;
    padding: 0;
    margin: 0;
    background-color: #000000; 
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.google {
    width: 100%;
    height: 70px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
}

<button class="google-button" onclick="location.href='/google'">
  <div class="google"></div> 
</button>

Теперь нужно просто расположить его посередине.

Answer 1

Вы на правильном пути, просто нужно немного изменить свой css.

.google-button {
    width: 200px;
    height: 50px;
    padding: 5px;
    margin: 0;
    background-color: #000000;
    border: 5px solid #000000;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.google {
    height: 35px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
    background-position: center;
}

<button class="google-button">
  <div class="google"></div>
</button>

Answer 2

Построен на предыдущих ответах с background-position

.google-button {
    width: 100%;
    height: 80px;
    padding: 0;
    margin: 0;
    background-color: #000000; 
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.google {
    width: 100%;
    height: 70px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
}

<button class="google-button" onclick="location.href='/google'">
  <div class="google"></div> 
</button>

Answer 3

Попробуйте с этим кодом.

.google-button {
    width: 210px;
    height: 80px;
    padding: 0px;
    margin: 0;
    background-color: #000000;
    border-radius: 0;
    border:none;
}

.google {
    height: 100%;
    width: 100%;
    background: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) no-repeat;
    background-position: center;
    background-size: contain;
}

   <button class="google-button">
                <div class="google"></div>
              </button>