css布局上下左右居中⼤全（⼀）
本⼈是前端的新⼈，这是第⼀次写技术博客，各位⼤⼤，本⽂有错误请指正，⼿中的板砖尽量轻拍，我怕疼~~
对于⽔平居中和垂直居中我也⽤过很多⽅法，但是有的时候管⽤有的时候⼜嗝屁不好使了。涉及到的情况很多，所以想细细的研究⼀番。隐隐感觉到前端的⽔好深~~
<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;
css设置文字垂直居中
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奇淫技巧，就不⼀⼀说了，有兴趣的可以⾃⼰去收集下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。