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

Posted wyfeng1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多种方式让你的容器水平居中相关的知识,希望对你有一定的参考价值。

方法一: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因为要考虑低版本浏览器兼容问题嘛。希望对你们有所帮助!

  

以上是关于多种方式让你的容器水平居中的主要内容,如果未能解决你的问题,请参考以下文章

CSS制作水平垂直居中对齐 多种方式各有千秋

容器内水平垂直居中

HTML CSS中如何实现DIV中的图片水平垂直居中对齐

水平和垂直居中容器 div

CSS水平居中的9种方法

css常用代码片段 (更新中)