css左右居中的几种常见方法 - 北极冰块

时间：2024-04-15 09:14:25

本人是前端的新人，这是第一次写技术博客，各位大大，本文有错误请指正，手中的板砖尽量轻拍，我怕疼~~

对于水平居中和垂直居中我也用过很多方法，但是有的时候管用有的时候又嗝屁不好使了。涉及到的情况很多，所以想细细的研究一番。隐隐感觉到前端的水好深~~

   <div class="box-wrap">
        <div class="box">
            我要居中
        </div>
    </div>

 

一、水平居中 
1、text-align: center. 
这个大家一般都用过，我就稍微扯一点：只要父级的div设置了这个属性，里面的文字就会居中（包括图片）,这个属性只对行内元素起作用。如果想要居中的是块级元素，它就无能为力了，要么把这个块级元素display: inline-block;要么换另一种方法。

.box-wrap {
  text-align: center;
}
.box {
  display:inline-block;
}

 

要点：要居中的必须是行内元素才有作用

2、margin： 0 auto; 
这个算是一个大招了，想让谁居中，就给谁设置上这个属性，左右居中妥了。即使父级使用了绝对定位或者相对定位，也是妥妥的好使。但是啊但是，你必须给这个要居中的家伙加上宽度width，否则白瞎。

.box {
  margin: 0 auto;
  width: 100px;
}

要点： 
1、必须给要居中的元素设置宽度 
2、这个家伙不能是浮动元素，否则居中失效 
3、没有声明DOCTYPE会导致居中失效

3、绝对定位法（左右+垂直居中） 
要居中的元素给绝对定位，给相对于要居中的父级相对定位。具体看下面的代码。 
重点是设置的margin负值。因为不给margin负值前居中的并不是子级这个整体，而是子级的上侧和左侧相交的那一点。所以要设置负值，往回拉一半。

.box-wrap {
  width: 1000px;
  position: relitive;/* 为了不让你要居中的元素被定位到外太空去，这个一定要设置。 */
}
.box {
  width: 200px;
  height: 200px;
  position: absotion;
  top: 50%;
  left: 50%;
  margin-top: -100px;/* 数值为高度的一半 */
  margin-left: -100px;/* 数值为宽度的一半 */
}

 

4、另类绝对定位（左右+垂直居中）

  .box-wrap {
    width: 1000px;
    height: 600px;
    position: relative;
    background: blue;
  }
  .box {
    width: 80%;
    height: 10%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: orange;
  }

 

要点：ie8及ie8以下无效

大家测试的时候给各级元素加上background或者border会比较方便。//新手之言，有错轻拍 
除了上面的这些还有其他的CSS奇淫技巧，就不一一说了，有兴趣的可以自己去收集下。

相关文章