css center section content code example

Example 1: center a div in css

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

Example 2: center with css

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

Example 3: html css center text on page

<style>
body { background: white }
section {
  background: black;
  color: white;
  border-radius: 1em;
  padding: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
  }
</style>

<section>
  <h1>Nicely centered</h1>
  <p>This text block is vertically centered.
  <p>Horizontally, too, if the window is wide enough.
</section>

Example 4: css center

// example 1 
div { display: grid; place-items: center; }

// example 3
div{ display:flex; align-items:center; }

// example 3
div { width: 100%; margin: 0 auto; }

Example 5: center text in div container

text-align: center