Текст по центру тега label

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Подскажите пожалуйста как текст вывести по центру тега label

<style>
label{
  background-color: #f00;
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 3px solid #00f;
}
</style>

<label>Test</label>
#2

Тут с одним лейблом наверно никак не сделать нормально вертикально по центру, кроме так себе вариантов типа line-height: 150px;

Лучше добавить родителя и например так:

<style>
div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  width: 150px;
  border: 2px dashed #f69c55;
}
</style>

<div>
  <label>Test</label>
</div>

https://jsfiddle.net/AlexP11223/4gnasm3p/

Или другие варианты: html - How do I vertically center text with CSS? - Stack Overflow

1 лайк