How to Center Align a Child Div Inside a Parent Div with CSS

Center child divs inside parent div

Try using display: inline-block and text-align: center

.parent {
    width: 100%;
    border: 1px solid blue;
    text-align: center;
}

.child {
    display: inline-block;  
    border: 1px solid red;
    margin: 2px;
}

jsFiddle: http://jsfiddle.net/qdHH3/3/

Centering two child Divs inside parent Div

Add below code to #container:

display: flex;
justify-content: center;
align-items: center;

Live Snippet

#container {    position: relative;    float: none;    margin: 0 auto;    border: solid blue 1px;    width: 100%;
    display: flex;    justify-content: center;    align-items: center;}
.tile {    width: 20em;    height: 40em;    border:solid black 1px;    display: inline-block;    margin: 1.5em 0;}

<div id="container">  <div class="tile">    <!--   When you remove this comment, the div shifts down and I do not understand what is causing that.    <h3>This Title Moves the div down. Why?</h3>-->  </div>  <div class="tile"></div></div>

Center child divs with tables inside a parent div

Try adding

display: flex;
justify-content: center;

to your parent containers

.parent_container {
  width: 100%;
  text-align: center;
}

.table_container {
  float: left;
  width: 30rem;
  margin-bottom: 3rem;
}

.table_container2 {
  float: left;
  width: 30rem;
  margin-bottom: 3rem;
}

.container {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

table {
  margin: 2rem auto;
  border-radius: 10px;
}

tr {
  padding: 15px;
  text-align: center;
}

td {
  color: black;
  text-align: center;
  vertical-align: middle;
  height: 60px;
  background-color: #e1edf9;
  width: 272px;
  border-top: 1px solid white;
}

td: first-of-type {
  border-top: none;
}

.sub_text {
  font-size: 12px;
  font-style: italic;
  color: #0071ce;
  font-weight: 100;
}

.wrapper {
  text-align: center;
  margin-top: 20px;
}

@media screen and (min-width: 1400px) {
  .table_container {
    float: left;
    width: 15rem;
  }
  .table_container:first-of-type {
    width: 30rem;
  }
}

@media screen and (min-width: 1400px) {
  .table_container2 {
    float: left;
    width: 15rem;
  }
  .table_container2:first-of-type {
    width: 30rem;
  }
}

@media only screen and (min-width: 1000) and (max-device-width: 1400px) {
  .table_container2 {
    float: left;
    width: 14rem;
  }
  .table_container2:first-of-type {
    width: 27rem;
  }
}

@media only screen and (min-width: 1000) and (max-device-width: 1400px) {
  .table_container {
    float: left;
    width: 14rem;
  }
  .table_container:first-of-type {
    width: 27rem;
  }
}

<div class="parent_container">
  <div class="wrapper">
    <a type="button" id="modalButton" class="btn btn-primary" data-target="#myModal" onclick="showmodal ();">
            Compare
        </a>
  </div>
  <div class="container">
    <div class="table_container">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
  <div class="container container2">
    <div class="table_container2">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container2">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="table_container2">
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</div>

center specific child div in a parent div that has multiple divs

You can give position:absolute and margin-top: 50vh to text-wrapper div. In this way it will remain at center of its parent div. You can also use width:100vw to give full width to text-wrapper div.

Align to center child DIVs inside parent DIV

try this:

@media screen and (max-width: 768px)
{
    .display_type, .buttons, .products 
    {
        float:none;
        margin:auto;
    }
}

child div align center on parent div with overflow?

Since you are using position: absolute for the child, best way to achieve what you want is remove position: absolute then add the margins you need.

div{  border: 1px solid black;}.parent {    width:300px;    height:300px;    margin:auto;    position: relative;    overflow: auto;}
.child {    width:350px;    height:150px;    top: 50px;    margin: 50px 20px 0;    display: inline-block;}

<div class="parent">    <div class="child"></div></div>

---

Related Topics