css左右居中的几种常见方法

时间:2024-09-04 21:35:20

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

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

   <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:;
left:;
bottom:;
right:;
margin: auto;
background: orange;
}

要点:ie8及ie8以下无效

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