0

I have an HTML element inside another. How can I center it by two dimensions of a wrapper at one time using CSS?

I'm trying this code:

.wrapper {
  heigth: 10rem;
  width: 100%;
  background-color: black;
  text-align: center;
}

.element {
  padding: 0.25rem 0.5rem;
  color: white;
  border: 1px solid white;
}
<div class="wrapper">
  <div class="element">Some element</div>
</div>

But it centers the element only horizontally, not vertically.
Are there any ways to solve this problem?

Alexey
  • 1
  • try justify-content:center and display:flex; in wrapper class – Anonymous Nov 24 '21 at 20:42
  • @PRAKASHSOLANKI this however only aligns along the main-axis which by default is horizontally. To vertically align the items you need: `align-items: center;` the horizontally centering of the text is already done by `text-align` – tacoshy Nov 24 '21 at 22:33

0 Answers0