How can i center vertically and horizontally the content of the content section?

Question

i want to certer the content of the content section, but when i tried to do that its centering in related of the page, i dont want that, this is my attempt:

.sideBar {
  float: left;
  width: 100px;
  background: aqua;
  overflow: hidden;
}

.content {
  overflow: hidden;
  background: yellow;
}

.inner {
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

<h1>Hello Plunker!</h1>
<div class="container">
  <div class="sideBar">
    <ul>
      <li><a href="#">ANALYTICS</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="inner">content</div

  </div>
</div>

i dont know what is the wrong

score 1 · Accepted Answer · answered Nov 27 '21 at 00:54

Because .inner is positioned absolutely, it is not relative to .content try:

.sideBar {
  float: left;
  width: 100px;
  background: aqua;
  overflow: hidden;
}

.content {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {

  }

<h1>Hello Plunker!</h1>
<div class="container">
  <div class="sideBar">
    <ul>
      <li><a href="#">ANALYTICS</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="inner">content</div

  </div>
</div>

Now whenever you change the size of .content, .inner should be placed in the center.

When you make an element `display: flex` and add `justify-content: center` and `align-items: center`, children should be placed in the center.

it should once you change the height of .content since there is no height given — Zane, Nov 27 '21 at 01:24

How can i center vertically and horizontally the content of the content section?

1 Answers1

When you make an element display: flex and add justify-content: center and align-items: center, children should be placed in the center.

When you make an element `display: flex` and add `justify-content: center` and `align-items: center`, children should be placed in the center.