子元素在父元素中垂直、水平居中——四种方法

对父元素定位

• 1-父子元素进行定位，对子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0;  （定位布局）

<div style="width:200px;height:200px;
            border:solid blue;
            position:relative;">
              
     <div style="width:100px;height:100px;
                 background:red;;
                 margin:auto;
                 position:absolute;
                 top:0;left:0;bottom:0;right:0;"> 
     </div>
</div>

• 2-对父元素定位，对子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度   （百分比布局）

  <div style="width:200px;height:200px; 
              border:2px solid #000;
              position:relative;">

      <div style="width:100px;height:100px;
                  background-color: red;
                  margin:auto;
                  position:absolute;left:50%;top:50%;
                  margin-left:-50px;margin-top:-50px;">
      </div>
  </div>

 

---

设置父元素的dispaly方式

• 3-父元素 display:table-cell; vertical-align:middle; 子元素变成一个内联元素display:inline-block

  <div style="width:200px;height:200px;
              border:2px solid #000;
              display:table-cell;
              vertical-align:middle;
              text-align: center;">

      <div style="width:100px;height:100px;
                  background-color: red;
                  display:inline-block">
      </div>
  </div>

• 4-父元素 display:flex; justify-content:center align-items:center，子元素自动居中  （伸缩盒布局）

  <div style="width:200px;height:200px; 
              border:2px solid #000;
              display:flex;
              justify-content:center;
              align-items:center;">

      <div style="width:100px;height:100px;
                  background-color: red;">
      </div>
  </div>

 

 

                           -----------本文完-----------