kathrynm kathrynm - 4 years ago 107
CSS Question

Center text independent of number of lines

Is it possible to build a css system which will allow a paragraph to center in a page independent of window width? Meaning that as you make the window smaller and the number or lines increases, it will auto adjust to still be centered in the page.

Here's a demo

And here's the existing system:

.container {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 10em;
background: #fafafa;
}

.title {
font-size: 1.5em;
font-weight: 400;
margin: 0 0 2rem 0;
}

.paragraph {
font-size: 1em;
font-weight: 100;
text-align: justify;
line-height: 1.5rem;
}


Thank you :)

Answer Source

This is a good reference for centering things https://www.w3.org/Style/Examples/007/center.en.html

You can use top: 50%; left: 50%; transform: translate(-50%,-50%); to put something in the center.

body {
  font-family: sans-serif;
  color: #9ab;
  background: #fff;
}

.container {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  background: #fafafa;
}
.title {
  font-size: 1.5em;
  font-weight: 400;
  margin: 0 0 2rem 0;
}
.paragraph {
  font-size: 1em;
  font-weight: 100;
  text-align: justify;
  line-height: 1.5rem;
}
<div class="container">
  <div class="title">TITLE</div>
  <div class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas, voluptatibus in accusamus alias voluptatem facilis omnis saepe laudantium, dolorem, nobis modi ratione est doloremque hic enim beatae fugit sapiente!</div>
</div>

You can also use flexbox with align-items: center; justify-content: center;

body {
  font-family: sans-serif;
  color: #9ab;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  width: 50%;
  background: #fafafa;
}
.title {
  font-size: 1.5em;
  font-weight: 400;
  margin: 0 0 2rem 0;
}
.paragraph {
  font-size: 1em;
  font-weight: 100;
  text-align: justify;
  line-height: 1.5rem;
}
<div class="container">
  <div class="title">TITLE</div>
  <div class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas, voluptatibus in accusamus alias voluptatem facilis omnis saepe laudantium, dolorem, nobis modi ratione est doloremque hic enim beatae fugit sapiente!</div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download