div水平垂直居中的方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shelbyandfxj/article/details/79797042

有如下一个div及其样式：

<style type="text/css">     
        div {
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
    </style>  
    <div id="outer">
    </div>

让其居中的方法有：

（1）

 #outer {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);//定义 2D 转换，沿着 X 和 Y 轴移动元素。
 }

（2）

#outer {  
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -100px;   //这是元素的宽度的一半
     margin-top: -100px;
} 

（3）

#outer {  
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto
} 

（4）这里是以父子元素来将div居中，将div的父元素定义为flex格局。（同样，当该子元素的宽高不定时也可以使用这种方法来使其垂直居中）

 body {
      display:flex;
      justify-content:center;   //定义了主轴方向的对齐方式，这里是居中
      align-items:center;       //定义了交叉轴方向的对齐方式
 }

（5）这种也是以父子元素的方式来定义垂直水平居中的，而且，这里父子元素的宽高要一致。

<style type="text/css">     
        div {
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
        #inner {
            margin-left: -50%;
            margin-top: -50%;
        }
        #outer {  
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>   

<div id="outer">
    <div id="inner"></div>
</div>