在容器中居中

Question

我有一个页面，我从页面中取出了一些元素以使其达到我的目的（关于页面）但是，我似乎没有看到任何可以将容器居中的 CSS这页纸。我尝试过做 Position: Center 以及我在网上阅读的其他代码技术，但它们似乎都想工作。

谁能告诉我哪里出错了。

/* Latest News Area css
============================================================================================ */

.latest_news_area {}

.l_news_inner {}

.l_news_item {
  @include transition;
  .l_news_img {
    overflow: hidden;
    a {
      display: block;
    }
    img {
      @include transition;
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  .l_news_content {
    border: 1px solid #ebebeb;
    border-top: 0px;
    padding: 30px 35px;
    h4 {
      font-size: 18px;
      color: $dip;
      font-family: $pop;
      font-weight: 500;
      @include transition;
      &:hover {
        color: #2bc0a4;
      }
    }
    p {
      font-size: 14px;
      line-height: 26px;
      color: $pfont;
      font-family: $pop;
      font-weight: 400;
      padding: 15px 0px 10px 0px;
    }
  }
  &:hover {
    box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);
  }
}


/* Latest News Area css
============================================================================================ */


/* Static Area css
============================================================================================ */

.static_area {
  padding: 100px 0px;
}

.static_inner {}

.static_main_content {
  position: relative;
  .static_social {
    position: absolute;
    left: -60px;
    top: 0px;
  }
}

.static_social {
  ul {
    li {
      margin-bottom: 20px;
      a {
        height: 30px;
        width: 30px;
        text-align: center;
        background: #4c65a8;
        color: #fff;
        display: block;
        border-radius: 50%;
        line-height: 30px;
      }
      &:nth-child(2) {
        a {
          background: #41a1f6;
        }
      }
      &:nth-child(3) {
        a {
          background: #f43535;
        }
      }
      &:nth-child(4) {
        a {
          background: #8f6247;
        }
      }
      &:nth-child(5) {
        margin-bottom: 0px;
        a {
          background: #f0c605;
        }
      }
    }
  }
}

.static_text {
  padding-top: 35px;
  padding-bottom: 15px;
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    &:last-child {
      padding-top: 15px;
    }
  }
}

.static_text2 {
  h3 {
    font-size: 24px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    padding-top: 13px;
  }
}

.media {
  margin: 30px 0px;
  .d-flex {
    h6 {
      font-family: $play;
      font-size: 100px;
      color: $baseColor;
      line-height: 75px;
    }
  }
  .media-body {
    padding-left: 32px;
    p {
      font-size: 18px;
      line-height: 26px;
      color: #1e1e27;
      font-family: $pop;
    }
    h5 {
      font-size: 14px;
      color: #b5aec4;
      font-family: $pop;
      padding-top: 15px;
      a {
        font-size: 16px;
        color: $dip;
        font-family: $pop;
        font-weight: 500;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
    }
  }
}

.right_sidebar_area {
  padding-left: 20px;
}

.right_widget {
  margin-bottom: 45px;
}

.r_w_title {
  padding-bottom: 20px;
  h3 {
    font-size: 22px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
}

.r_news_widget {
  .news_inner {
    .news_item {
      border-bottom: 1px solid #eeeef0;
      padding-bottom: 14px;
      margin-bottom: 15px;
      h4 {
        font-size: 16px;
        line-height: 26px;
        font-family: $pop;
        font-weight: 500;
        color: #1e1e27;
        padding-bottom: 7px;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
      h6 {
        font-size: 14px;
        color: #b5aec4;
        font-family: $pop;
      }
      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
}

.r_cat_widget {
  ul {
    li {
      margin-bottom: 12px;
      a {
        font-size: 16px;
        color: #1e1e27;
        font-family: $pop;
        @include transition;
        padding-left: 20px;
        position: relative;
        &:before {
          content: "";
          height: 8px;
          width: 8px;
          border-radius: 50%;
          background: $baseColor;
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          @include transition;
        }
      }
      &:hover {
        a {
          color: $baseColor;
          &:before {
            left: 5px;
          }
        }
      }
    }
  }
}

.r_tag_widget {
  ul {
    margin-right: -9px;
    li {
      display: inline-block;
      margin-bottom: 9px;
      margin-right: 6px;
      a {
        font-size: 12px;
        color: $pfont;
        font-family: $pop;
        background: #ebebeb;
        display: inline-block;
        padding: 0px 20px;
        text-transform: uppercase;
        line-height: 30px;
        @include transition;
      }
      &:last-child {
        margin-bottom: 0px;
        margin-right: 0px;
      }
      &:hover {
        a {
          color: $baseColor;
        }
      }
    }
  }
}


/* End Static Area css
============================================================================================ */

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: none;
    outline: none;
  }
}

.row.m0 {
  margin: 0px;
}

.p0 {
  padding: 0px;
}

body {
  line-height: 26px;
  font-size: 14px;
  font-family: $pop;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
}

#success {
  display: none;
}

#error {
  display: none;
}

.display_table {
  display: table;
  width: 100%;
}

.display_table_row {
  display: table-row;
}

.display_table_cell {
  display: table-cell;
  float: none !important;
}

.p_100 {
  padding: 100px 0px;
}

iframe {
  border: none;
}

i {
  &:before {
    margin-left: 0px !important;
  }
}


/* Container Custome Code css
============================================================================================ */

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}


/* End Container Custome Code css
============================================================================================ */


/* Main title css
============================================================================================ */

.main_title {
  h2 {
    font-size: 40px;
    line-height: 48px;
    font-family: $pop;
    color: $dip;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: $pfont;
    font-family: $pop;
    line-height: 26px;
    padding-top: 15px;
  }
}

.center_title {
  color: #fff;
  text-align: center;
  padding-bottom: 40px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
  }
}

.b_center_title {
  text-align: center;
  padding-bottom: 50px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
    color: $dip;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
    color: $pfont;
  }
}


/* Main title css
============================================================================================ */

<section class="static_area">
  <div class="container">
    <div class="static_inner">
      <div class="row">
        <div class="col-lg-9">
          <div class="static_main_content">
            <div class="static_img">
              <img class="img-fluid" src="img/static-1.jpg" alt="">
            </div>
            <div class="static_text">
              <p>Some text.</p><br>
              <p>Some more text.</p><br>
              <p>Even more text.</p><br>
              <p>Wow... quite a lot of text</p><br>
            </div>
            <section class="testimonials_area p_100">
              <div class="container">
                <div class="testimonials_slider owl-carousel">
                  <div class="item">
                    <div class="media">
                      <img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
                      <div class="media-body">
                        <img src="img/dotted-icon-1.png" alt="">
                        <p>Some text.</p>
                        <h4><a href="#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="media">
                      <img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
                      <div class="media-body">
                        <img src="img/dotted-icon-1.png" alt="">
                        <p>Some more text.</p>
                        <h4><a href="#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="media">
                      <img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
                      <div class="media-body">
                        <img src="img/dotted-icon-1.png" alt="">
                        <p>Even more text</p>
                        <h4><a href="#">Smith </a> - Human</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

没有position:center;这样的东西，你要做的是为容器定义一个静态宽度，然后使用margin:0 auto;使其居中。

.container {
  width:600px;
  height:500px;
  background:black;
  margin:0 auto; /* this will center the container */
}

<div class="container"></div>

Answer 2

给定一个固定宽度并应用边距：0 auto;

人们总是询问如何将事物居中，我喜欢参考这篇名为 How to center things from W3C 的帖子。有用的信息如果你想了解一下。

/* Latest News Area css
============================================================================================ */

.latest_news_area {}

.l_news_inner {}

.l_news_item {
  @include transition;
  .l_news_img {
    overflow: hidden;
    a {
      display: block;
    }
    img {
      @include transition;
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  .l_news_content {
    border: 1px solid #ebebeb;
    border-top: 0px;
    padding: 30px 35px;
    h4 {
      font-size: 18px;
      color: $dip;
      font-family: $pop;
      font-weight: 500;
      @include transition;
      &:hover {
        color: #2bc0a4;
      }
    }
    p {
      font-size: 14px;
      line-height: 26px;
      color: $pfont;
      font-family: $pop;
      font-weight: 400;
      padding: 15px 0px 10px 0px;
    }
  }
  &:hover {
    box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);
  }
}


/* Latest News Area css
============================================================================================ */


/* Static Area css
============================================================================================ */

.static_area {
  padding: 100px 0px;
}

.static_inner {}

.static_main_content {
  position: relative;
  .static_social {
    position: absolute;
    left: -60px;
    top: 0px;
  }
}

.static_social {
  ul {
    li {
      margin-bottom: 20px;
      a {
        height: 30px;
        width: 30px;
        text-align: center;
        background: #4c65a8;
        color: #fff;
        display: block;
        border-radius: 50%;
        line-height: 30px;
      }
      &:nth-child(2) {
        a {
          background: #41a1f6;
        }
      }
      &:nth-child(3) {
        a {
          background: #f43535;
        }
      }
      &:nth-child(4) {
        a {
          background: #8f6247;
        }
      }
      &:nth-child(5) {
        margin-bottom: 0px;
        a {
          background: #f0c605;
        }
      }
    }
  }
}

.static_text {
  margin:0 auto;
  width:50%;
  padding-top: 35px;
  padding-bottom: 15px;
  width:50%;
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    &:last-child {
      padding-top: 15px;
    }
  }
}

.static_text2 {
  h3 {
    font-size: 24px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    padding-top: 13px;
  }
}

.media {
  margin: 30px 0px;
  .d-flex {
    h6 {
      font-family: $play;
      font-size: 100px;
      color: $baseColor;
      line-height: 75px;
    }
  }
  .media-body {
    padding-left: 32px;
    p {
      font-size: 18px;
      line-height: 26px;
      color: #1e1e27;
      font-family: $pop;
    }
    h5 {
      font-size: 14px;
      color: #b5aec4;
      font-family: $pop;
      padding-top: 15px;
      a {
        font-size: 16px;
        color: $dip;
        font-family: $pop;
        font-weight: 500;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
    }
  }
}

.right_sidebar_area {
  padding-left: 20px;
}

.right_widget {
  margin-bottom: 45px;
}

.r_w_title {
  padding-bottom: 20px;
  h3 {
    font-size: 22px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
}

.r_news_widget {
  .news_inner {
    .news_item {
      border-bottom: 1px solid #eeeef0;
      padding-bottom: 14px;
      margin-bottom: 15px;
      h4 {
        font-size: 16px;
        line-height: 26px;
        font-family: $pop;
        font-weight: 500;
        color: #1e1e27;
        padding-bottom: 7px;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
      h6 {
        font-size: 14px;
        color: #b5aec4;
        font-family: $pop;
      }
      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
}

.r_cat_widget {
  ul {
    li {
      margin-bottom: 12px;
      a {
        font-size: 16px;
        color: #1e1e27;
        font-family: $pop;
        @include transition;
        padding-left: 20px;
        position: relative;
        &:before {
          content: "";
          height: 8px;
          width: 8px;
          border-radius: 50%;
          background: $baseColor;
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          @include transition;
        }
      }
      &:hover {
        a {
          color: $baseColor;
          &:before {
            left: 5px;
          }
        }
      }
    }
  }
}

.r_tag_widget {
  ul {
    margin-right: -9px;
    li {
      display: inline-block;
      margin-bottom: 9px;
      margin-right: 6px;
      a {
        font-size: 12px;
        color: $pfont;
        font-family: $pop;
        background: #ebebeb;
        display: inline-block;
        padding: 0px 20px;
        text-transform: uppercase;
        line-height: 30px;
        @include transition;
      }
      &:last-child {
        margin-bottom: 0px;
        margin-right: 0px;
      }
      &:hover {
        a {
          color: $baseColor;
        }
      }
    }
  }
}


/* End Static Area css
============================================================================================ */

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: none;
    outline: none;
  }
}

.row.m0 {
  margin: 0px;
}

.p0 {
  padding: 0px;
}

body {
  line-height: 26px;
  font-size: 14px;
  font-family: $pop;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
}

#success {
  display: none;
}

#error {
  display: none;
}

.display_table {
  display: table;
  width: 100%;
}

.display_table_row {
  display: table-row;
}

.display_table_cell {
  display: table-cell;
  float: none !important;
}

.p_100 {
  padding: 100px 0px;
}

iframe {
  border: none;
}

i {
  &:before {
    margin-left: 0px !important;
  }
}


/* Container Custome Code css
============================================================================================ */

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}


/* End Container Custome Code css
============================================================================================ */


/* Main title css
============================================================================================ */

.main_title {
  h2 {
    font-size: 40px;
    line-height: 48px;
    font-family: $pop;
    color: $dip;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: $pfont;
    font-family: $pop;
    line-height: 26px;
    padding-top: 15px;
  }
}

.center_title {
  color: #fff;
  text-align: center;
  padding-bottom: 40px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
  }
}

.b_center_title {
  text-align: center;
  padding-bottom: 50px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
    color: $dip;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
    color: $pfont;
  }
}


/* Main title css
============================================================================================ */

<section class="static_area">
  <div class="container">
    <div class="static_inner">
      <div class="row">
        <div class="col-lg-9">
          <div class="static_main_content">
            <div class="static_img">
              <img class="img-fluid" src="img/static-1.jpg" alt="">
            </div>
            <div class="static_text">
              <p>Some text.</p><br>
              <p>Some more text.</p><br>
              <p>Even more text.</p><br>
              <p>Wow... quite a lot of text</p><br>
            </div>
            <section class="testimonials_area p_100">
              <div class="container">
                <div class="testimonials_slider owl-carousel">
                  <div class="item">
                    <div class="media">
                      <img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
                      <div class="media-body">
                        <img src="img/dotted-icon-1.png" alt="">
                        <p>Some text.</p>
                        <h4><a href="#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="media">
                      <img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
                      <div class="media-body">
                        <img src="img/dotted-icon-1.png" alt="">
                        <p>Some more text.</p>
                        <h4><a href="#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="media">
                      <img class="d-flex rounded-circle" src="img/testimonials-1.png" alt="">
                      <div class="media-body">
                        <img src="img/dotted-icon-1.png" alt="">
                        <p>Even more text</p>
                        <h4><a href="#">Smith </a> - Human</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>