Open
Description
水平居中
水平居中（margin:0 auto;）
被包裹的元素不能有浮动的属性。否则的话这个属性就会失效。
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
}
.item{
margin:0 auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
水平居中（text-align：center;）
这个属性在没有浮动的情况下，我们可以将其转换为inline / inline-block，然后其父元素加上text-align:center;属性就可以将其居中
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
text-align:center;
}
.item{
display:inline/inline-block;
width: 100px;
height: 100px;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
垂直水平居中的九种方式
一、子元素相对于父元素绝对定位，并且margin值减去自己宽高的一半
该方法具有一定的局限性，因为其必须要知道子元素本身的宽高
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
二、calc 动态计算
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
}
.item{
width: 100px;
height: 100px;
background: green;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
三、绝对定位和transform
该方法用最能装逼，用到了css3变形，面试者看到你代码里面有这样的 ，你的逼格瞬间就上去了，当然了 你知道的，逼格的东西是有兼容性问题的
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
}
.item{
width: 100px;
height: 100x;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
四、子元素相对于父元素绝对定位，并且margin值为auto
该方式不受元素宽高所限制，比较好用（推荐使用）
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
.item{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
五、diplay：table-cell
该方式是将元素转换成表格样式，再利用表格的样式来进行居中（推荐）
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
}
.item{
margin:0 auto;
width: 100px;
height: 100px;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
六、css3中的flex属性
这个属性很好用，但是绝逼有兼容性问题的，用者要注意
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.item{
width: 100px;
height: 100px;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
七、设定行高( line-height )
设定行高是垂直居中最简单的方式，适用于「单行」的「行内元素」 ( inline、inline-block)，例如单行的标题，或是已经设为inline-block属性的div
<style type="text/css">
.box {
height:300px;
width: 300px;
border: 1px solid red;
line-height: 300px;
text-align: center;
}
</style>
<body>
<div class="box">
我是居中内容
</div>
</body>
八、伪元素( ::before、::after)
第六种方法设置行高line-height只适用于单行，所以我们如果要让多行的元素也可以垂直居中，就须要使用伪元素的方式。
<style type="text/css">
.box{
width:200px;
height:150px;
border:1px solid #000;
text-align:center;
}
.box::before {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align:middle; /* 使元素的中部与父元素的基线对齐。 */
}
.child{
width:30px;
height:60px;
display:inline-block;
vertical-align:middle;
background:#0c0; /* 绿色 */
}
</style>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
九、padding + inline-block
<style>
.box{
width: 300px;
border: 1px solid red;
padding: 100px 0;
text-align: center;
}
.child {
display: inline-block;
width: 200px;
height: 100px;
background: green;
}
</style>
<body>
<div class="box">
<div class="child"></div>
</div>
