多种方式让你的容器水平居中

Posted 2020-08-17 wyfeng1

方法一：position加margin（兼容性：主流浏览器均支持，IE6不支持） 最容易让人理解也是最常见的一种方法

<div class="box">
    <div class="center"></div>
</div>

　　

/**css**/
.box {
    width: 600px;
    height: 600px;
    background: #000;
    position: relative;
.center {
    position: absolute;
    width: 100px;
    height: 100px;
    background: orange;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  margin: auto;
}

　　另外一种margin+position

<div class="box">
    <div class="center"></div>
</div>

/**css**/
.box {
    width: 600px;
    height: 600px;
    background: #000;
    position: relative;
.center {
    position: absolute;
    width: 100px;
    height: 100px;
    background: orange;
    left: 50%;
    top: 50%;
    margin-left:-50px;
    margin-top:-50px;

}

方法二：position加 transform（兼容性：ie9以下不支持 transform，手机端较好。）

/* css */
.box {
    position: relative;
    background:#ccc;
    width: 600px;
    height: 600px;}
 
.center {
    position: absolute;
    background: green;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 100px;
    height: 100px;
}

　方法三：display:flex;margin:auto　

/* css */
.box {
    background: yellow;
    width: 600px;
    height: 600px;
    display: flex; 
}
 
.center {
    background: green;
    width: 100px;
    height: 100px;
    margin: auto;
}

　　方法四：不固定宽高（IE67不支持）

.box {
    background: yellow;
    width: 600px;
    height: 600px;
}

.content {
　　left:50%;
　　transform:translateX(-50%);
　　display:table-cell;//容器变单元格
　　vertical-align:middle;//单元格居中
}

　　方法五：类似于方法四

/*css*/
.box{
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.center{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: green;
}

方法六：纯position

/* css */
.box {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;
}

.center {
    background: green;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px; 
  
}

　　方法七：flex;align-items: center;justify-content: center

.box {
    background: yellow;
    width: 600px;
    height: 600px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
 
.center {
    background: green;
    width: 100px;
    height: 100px;
}

　　居中的方式网上会有很多种方法，熟练其中的一两种也就够用了。

移动端建议大家使用方法四和七不固定宽高，效果还是非常不错的；

pc端的话比较建议大家用纯position因为要考虑低版本浏览器兼容问题嘛。希望对你们有所帮助！