DIV居中的⼏种⽅式
⾸先，这个问题是个⽼⽣常谈的问题，基本上每个做前端的⼈都会⽤到这样的布局⽅式，所以我在这篇⽂章中做个总结，列举⼏种常⽤的居中⽅式供各位参考。
居中相对来说还是⽐较容易的，在这⾥我把它分为  已知宽⾼度的居中  和  未知宽⾼度的居中，已知居中就很简单了，只需要在css样式上⽤margin属性或者padding属性给他设置⼀个相对于⽗元素的合适的值，就可以实现居中，我们着重总结⼀下  未知宽⾼的居中  。
⼀、⽔平居中
1.⽂本⽔平居中
/*css样式*/
<style>
p{
text-align:center; //⽂本对齐⽅式
}
</style>
<p>居中</p>
2.通过绝对定位实现
<style>
/*⽗元素定义（未知⽗元素⼤⼩）*/
.father_div{
position: relative;
}
/*居中元素样式*/
.center_div{
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 50%;
transform: translateX( -50% );
}
</style>
<div class="father_div">
<div class="center_div"></div>
</div>
使⽤这种⽅法需要注意的是：由于是使⽤绝对定位，所有他会存在相对于谁定位的情况，简单点来说，如果⽗元素的position是relative，他是相对于⽗元素定位，如果⽗元素没有设置该属性，他会继续往上⼀层这个属性，到就像对于这⼀层定位，没有到就像对于body定位 。还有⼀点需要注意的是，因为绝对定位会脱离⽂档流，所以需要预留出来显⽰的位置。
这种⽅法的好处是，可以适⽤于所有未知⼤⼩的情况，甚⾄⾃⾝、⽗元素宽⾼都不知道也可以使⽤；缺点是，并不是所有的浏览器都适配，IE的，360的好像都不⾏。
3. margin: 0 auto属性
这个没什么要说的，需要注意的是如果该属性不管⽤，可能是因为⾃⾝不是块元素（包括inline-block⾏内块）造成的，可以加⼀句display: block；多半就能解决。如果还不能解决那只能具体情况具体分析了。
4.js配合css
这个⽅法不太常⽤，甚⾄有点鸡肋，不过我还是给⼤家写出来了，这⾥我提供的是⼀个逻辑，具体的代码⽐较简单就不再展⽰了，操作：通过js获取⽗元素和div的宽，然后就可以通过js写margin或者padding，其实他的本质就是把未知的宽变为已知。
⼆、垂直居中
垂直居中跟⽔平居中⼤差不差，只是细节调整⼀下就好。
1.⽂本垂直居中
在多数情况下，⽤<p><button>等标签创建的元素默认都是垂直居中，但是会有⼩部分情况并不居中，主要原因是⾼度发⽣改变但是⾏⾼不变，所以此时我们把⾏⾼line-height设置成和⾼度height⼀样⼤⼩就⾏，或者直接设置⾏⾼不设置⾼度，这样也可以把⽗元素撑开且垂直居中。
2.绝对定位
<style>
/*⽗元素定义（未知⽗元素⼤⼩）*/
.father_div{
position: relative;
}
/*居中元素样式*/
.center_div{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY( -50% );
}
</style>
<div class="father_div">
<div class="center_div"></div>
</div>
这种⽅法所需要注意的和宽度绝对定位居中所需要注意的问题⼀样。
3.display：table-cell
.center{
display: table-cell;
vertical-align: middle;
}
这种⽅法也是，⼏乎没⼈⽤。
三、⽔平垂直居中
1.绝对定位（万⾦油）
<style>
/*⽗元素定义（未知⽗元素⼤⼩）*/
.father_div{
position: relative;
}
/*居中元素样式*/
div中的div居中
.center_div{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50% , -50% );
}
</style>
<div class="father_div">
<div class="center_div"></div>
</div>
我真的强烈推荐这种⽅法，因为太⽅便了，⾄少我在给公司制作⽹页的时候经常⽤。
总结：关于居中的⽅法很多，也有很多⽂章讲述过，肯定还有我不知道的⽅法，⾄于我没提到的请⼤家谅解，最后也希望这篇⽂章对各位⼤佬有所帮助。

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