html - 将此 h1 居中 'button'

Question

这是一个非常基本的问题，但我就是无法让它发挥作用。我在 Bootstrap 框架中设计了一个 h1 标题，但无法将其设置为: - 居中 -在较小的屏幕上缩小

任何帮助将不胜感激!

我的CSS:

    .itsthisone h1 {
  background-color: #fff;
  border: 6px solid #dfdfdd;
  color: #f47d41;
  font-size: 18px;
  margin-left: auto ;
  margin-right: auto ;
  padding: 20px 0;
  position: absolute;
  top: -34px;
  text-align: center;
  width: 720px;
}

@media (max-width: 479px) {
  .itsthisone h1 {
font-size: 14px;
  top: -15px;
  margin-left: auto ;
  margin-right: auto ;
  padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .itsthisone h1 {
    font-size: 14px;
    width: 360px;
  }
}

我的 HTML:

<section class="itsthisone">
    <h1>keep it in center!</h1>

提前致谢! ( 似乎从代码中消失了)

Answer 1

你可以这样做:

逻辑:移动绝对容器的 50% 并放置容器宽度的负边距的一半，然后得到容器相对于其父容器的中心。 (静态方法)

CSS

.itsthisone h1 {
  background-color: #fff;
  border: 6px solid #dfdfdd;
  color: #f47d41;
  font-size: 18px;
  padding: 20px 0;
  position: absolute;
  top: -34px;
  text-align: center;
  width: 720px;
  left: 50%;
  margin-left: -360px;
}

@media (max-width: 479px) {
  .itsthisone h1 {
    font-size: 14px;
    top: -15px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .itsthisone h1 {
    font-size: 14px;
    width: 360px;
    left: 50%;
    margin-left: -180px;
  }
}

DEMO HERE