css垂直水平居中

公共样式定义盒子宽高

.wh200{
    width: 200px;
    height: 200px;
    border: 1px solid slateblue;
    background-color: slateblue;
    border-radius: 8px;
}
.wh100{
    width: 100px;
    height: 100px;
    border: 1px solid salmon;
    background-color: salmon;
    border-radius: 4px;
}

• display:flex + justify-content + align-items(简写属性：place-items:center)

.outer1 {
　　display: flex;
　　justify-content: center;
　　align-items: center;
}
.inner1 {}
...
<div class="wh200 outer1">
　　<div class="wh100 inner1">宽高未知
　　</div>
</div>

• position + tansform

.outer2 {
　　position: relative;
}
.inner2 {
　　position: absolute;
　　left: 50%;
　　top: 50%;
　　transform: translate(-50%, -50%);
}
...
<div class="wh200 outer2">
　　<div class="wh100 inner2">
　　　　宽高未知
　　</div>
</div>

• position + calc

.outer3 {
　　position: relative;
}
.inner3 {
　　position: absolute;
　　left: calc(50% - 50px);
　　top: calc(50% - 50px);
}
...
<div class="wh200 outer3">
　　<div class="wh100 inner3">
　　　　宽高需已知
　　</div>
</div>

• position + margin:负宽度

.outer4 {
　　position: relative;
}
.inner4 {
　　position: absolute;
　　left: 50%;
　　top: 50%;
　　margin-left: -50px;
　　margin-top: -50px;
}
...
<div class="wh200 outer4">
　　<div class="wh100 inner4">
　　　　宽高需已知
　　</div>
</div>

• position + margin:auto

.outer5 {
　　position: relative;
}
.inner5 {
　　position: absolute;
　　left: 0;
　　right: 0;
　　top: 0;
　　bottom: 0;
　　margin: auto;
}
...
<div class="wh200 outer5">
　　<div class="wh100 inner5">
　　　　宽高需已知
　　</div>
</div>

• display:grid + align-self + justify-self

.outer6 {
　　display: grid;
}
.inner6 {
　　align-self: center;
　　justify-self: center;
}
...
<div class="wh200 outer6">
　　<div class="wh100 inner6">
　　　　宽高未知
　　</div>
</div>

• display:grid + margin

.outer7 {
　　display: grid;
}
.inner7 {
　　margin: auto;
}
...
<div class="wh200 outer7">
　　<div class="wh100 inner7">
　　　　宽高未知
　　</div>
</div>

• display:grid + align-content + justify-content(简写属性：place-items:center)

.outer8 {
　　display: grid;
　　align-content: center;
　　justify-content: center;
}
.inner8 {
}
...
<div class="wh200 outer8">
　　<div class="wh100 inner8">
　　　　宽高未知
　　</div>
</div>

• display:grid + align-items + justify-items(简写属性：place-items:center)

 .outer9 {
　　display: grid;
　　align-items: center;
　　justify-items: center;
}
.inner9 {}
...
<div class="wh200 outer9">
　　<div class="wh100 inner9">
　　　　宽高未知
　　</div>
</div>

• display: table-cell + vertical-align + text-align

.outer10 {
　　display: table-cell;
　　vertical-align: middle;
　　text-align: center;
}
.inner10 {
　　display: inline-block;
}
...
<div class="wh200 outer10">
　　<div class="wh100 inner10">
　　　　宽高未知
　　</div>
</div>

• display: inline-block + 伪元素 + vertical-align + text-align

.outer11 {
　　text-align: center;
}
.outer11:before {
　　content: '';
　　height: 100%;
　　display: inline-block;
　　vertical-align: middle;
　　margin-right: -0.25em;
}
.inner11 {
　　display: inline-block;
　　vertical-align: middle;
}
...
<div class="wh200 outer11">
　　<div class="wh100 inner11">
　　　　宽高未知
　　</div>
</div>

• text-align + line-height

.outer12{
　　line-height: 200px;
　　text-align: center;
}
.inner12{
　　display: inline;
}
 <div class="wh200 outer12">
　　<div class="wh100 inner12">
　　　　一行文字居中
　　</div>
</div>