在开发中经常会遇到让某个元素垂直居中，但宽度并不确定。下面就总结一下，哪些方法可以实现不定宽高，水平垂直居中。
不适合的方案
text-align和line-height
这两个都是适用于单排文字，在不确定高度，且文字有多行的情况下，并不适合。
position：absolute、50%和margin：-px;
大部分情况下，这种方案是可以满足要求的。但是在内部元素高度不确定的情况下，你无法知道margin的偏移量该是多少。所以也不适合。
position：fixed、0和margin：auto；
当我们要制作一个弹出框时，可以选择这个方案。
<style>
.container{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
amrgin:auto;
}
</style>
<div class="container" style="width: 300px; height:200px; background:red">
fixed center
</div>
position:absolute、0和margin：auto
<style>
.container{
position:relative;
}
.inner-wrapper{
postion:absolute
}
</style>
<div class="container">
<p>this is a p</p>
<div class="inner-wrapper">
<div class="inner" style="width: 300px;height: 200px;background: #f1f1f1">
this is a box fixed in center of screen
</div>
</div>
</div>
这种方案的缺点是子元素依然要设定宽高。
正确的方案
display:table和display:table-cell
<div class="container">
<div class="inner">
center center
</div>
</div>
<style>
.container{
display:table
}
.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
position:absolute、50%和translate
<div class="container">
<div class="inner">
center center
</div>
</div>
<style>
.container{
display:relative
}
.inner{
display:absolute;
top:50%;
left:50%;
transfrom:translate(-50%,-50%)
}
</style>
在这里面通过transform来替代margin做位移，translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%。
vw vh和translate
vh和vw是两个比较偏的单位，是指“viewport的hieght和width的1%”
<div class="inner">
center center
</div>
<style>
.inner{
display:fixed
top:50vh;
left:50vw;
transfrom:translate(-50%,-50%)
}
</style>
vh vw只能从窗口的大小去考虑，不适合正常的文档流，不过在一些特殊场合确非常有用。比如说做全屏应用。
：beforr和display:inline-block
<div class="container">
<div class="inner">
center center
</div>
</div>
<style>
.container：before{
content: '';
diaplay:inline-block;
height:100%;
vertacal-align:middle;
}
.inner{
display:inline-block;
}
</style>
flex
<div class="container">
<div class="inner">
center center
</div>
</div>
<style>
.container{
diaplay:flex;
align-item:center;
justify-content:center;
}
.inner{
display:inline-block;
}
</style>
display: flex，表示该容器内部的元素将按照flex进行布局。align-items: center表示这些元素将相对于本容器水平居中，justify-content: center也是同样的道理垂直居中。对.container赋予了这些样式之后，作为它的内部元素.inner自己自觉的居中了。而且这里你会发现，由于没有使用text-align: center，.inner里面的文字是不会居中的，也就是说仅仅.inner这个容器居中而已。
以上
网友评论