margin: auto you really understand what

meaning

margin: auto calculation means is a keyword having a strong, the remaining space to be used to calculate the direction elements corresponding to a size obtained

Fill rule

(1) If the value side, the side of auto, the auto remaining space

(2) If both sides are auto, the remaining space equally

<style>
    .father {
      width: 300px;
      background-color: #f0f3f9;
    }
    .son {
      width: 200px;
      height: 120px;
      margin-right: 80px;
      margin-left: auto;
      background-color: #cd0000;
    }
  </style>

<div class="father">
    <div class="son"></div>
  </div>

 

 

 

Left margin is 20px, the right margin is 80px. Here son width 200px, the container is 300px, the total size of the remaining space is 100px, wherein the use of margin-right 80px, then the 'auto' Calcd margin-left is the remaining 20px

margin-left: auto instead of float: right right alignment achieved

 

 

.father {
      width: 300px;
      background-color: #f0f3f9;
    }
    .son {
      width: 200px;
      height: 120px;
      margin-left: auto;
      background-color: #cd0000;
    }

<div class="father">
    <div class="son"></div>
  </div>

 

 

 

magin: atuo achieve absolute positioning with the horizontal and vertical center

.father {
      width: 300px;
      height: 150px;
      background-color: #f0f3f9;
      position: relative;
    }

    .son {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: #cd0000;
      margin: auto;
    }


<div class="father">
    <div class="son"></div>
  </div>

 

Original link: https://www.cnblogs.com/raind/p/10726591.html