居中这个 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>

提前致谢！（< /section> 似乎从代码中消失了）

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

居中这个 h1 'button'

center this h1 'button'

html

css

center

twitter-bootstrap