Как сделать всплывающее меню по центру?

Question

[gifon]

Здравствуйте, я делаю всплывашку которая появляется когда пользователь наведет на нее мышку

<div class="dropdown">
	<button>label</button>
	<div class="content">
		someText
	</div>
</div>

<style>
	button {
		outline: none;
		border: 0;
		padding: 0;
		margin: 0;
		background: transparent;
	}

	.content {
		display: none;
		position: absolute;


		background-color: green;
		width: max-content;
		color: black;
	}

	.dropdown:hover .content {
		display: block;
	}
</style>

Но как ее выровнять учитывая что width:max-content;

Answer 1

[wonderingpeanut]

по центру чего? экрана? контейнера (родителя)?

/* будет выравнен по центру первого родителя с установленным position */
.content { 
  ...
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Comments

[gifon]

Если честно я не знаю, просто центр зеленого поля "someText" по Х должен быть такой же, как и у label
Я впервые пытаюсь реализовать такое для всплывашки не совсем представляю как это должно быть)

[wonderingpeanut]

gifon, текст можно отцентровать свойством text-align

[snxx]

gifon, можно еще так: