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

对父元素定位

  • 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>

 

 

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

 

 

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页