居中文本与行数无关

Question

是否可以构建一个 css 系统，使段落在页面中居中，而不受 window 宽度的影响？这意味着当您将 window 变小并且数量或行数增加时，它会自动调整以仍然在页面中居中。

这是一个demo

这是现有系统：

.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;
}

谢谢:)

Answer 1

这是一个很好的居中参考https://www.w3.org/Style/Examples/007/center.en.html

你可以用top: 50%; left: 50%; transform: translate(-50%,-50%);把东西放在中间。

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>

您还可以将 flexbox 与 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>

居中文本与行数无关

Center text independent of number of lines

html

css

centering