center this h1 'button'

Question

This is a really basic question, but I simply can't get this to work. I styled a h1 heading in a bootstrap framework, but cant get it to either: -stay in center -make it smaller on smaller screens

Any help will be greatly appreciated!

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

My HTML:

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

Thanks in advance! (< /section> seems to dissapear from the code)

Answer 1

You can do this:

The logical: Move 50% of your absolute container and put half negative margin of the width of the container , then you get the center of the container relative to his parent. (static method)

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