Centering a smaller div inside a larger div

This question already has an answer here:

How to horizontally center a <div> in another <div>? 82 answers

Vertically centering a div inside another div 23 answers

---

#content_wrapper {
  height: 30rem;
  width: 100%;
  background-color: blue;
  position: relative;
  margin: 0;
}

.content {
  height: 30rem;
  width: 80%;
  background-color: green;
  margin:0 auto !important;
  display: block !important;
}

this will center it horizontally heres a js fiddle https://jsfiddle.net/benF/b4w2yboy/6/

remove position:absolute; and set display:block; and remove the margin-left: 10%; then it should work

NOTE you must have a width set for the .content element currently it is 80%

---

HTML:

<div id="content_wrapper">    
    <div class="content">Your text</div>
</div>

CSS:

#content_wrapper {
  background-color: green;
  text-align: center;
}
.content {
  background-color: red;
  display: inline-block;
}

链接地址: http://www.djcxy.com/p/75888.html

上一篇: 中心在twitter引导中对齐列

下一篇: 将更小的div集中在更大的div中