Question

是否可以构建一个css系统，允许段落居中于页面中，与窗口宽度无关？这意味着当您使窗口变小并且数字或线条增加时，它将自动调整为仍然在页面中居中。

这里是demo

以下是现有系统：

npm install -g bower

谢谢：）

Answer 1

这是集中事物https://www.w3.org/Style/Examples/007/center.en.html

的好参考

您可以使用top: 50%; left: 50%; transform: translate(-50%,-50%);将某些内容放在中心位置。

＆＃13;

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

＆＃13;

<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>

＆＃13;

您还可以将flexbox与align-items: center; justify-content: center;

一起使用

＆＃13;

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

＆＃13;

<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>

＆＃13;

中心文本与行数无关

1 个答案: