1. 左右居中方案
- 行内元素:
text-align: center
- 定宽块状元素: 左右
margin
值为 auto
- 不定宽块状元素:
table
布局,position + transform
.wrap {
text-align: center
}
.center {
display: inline;
}
.center {
width: 100px;
margin: 0 auto;
}
.wrap {
position: relative;
}
.center {
position: absulote;
left: 50%;
transform: translateX(-50%);
}
2. 上下垂直居中方案
- 定高:
margin
,position + margin
(负值) - 不定高:
position
+ transform
,flex
,IFC + vertical-align:middle
.center {
height: 100px;
margin: 50px 0;
}
.center {
height: 100px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.wrap {
display: flex;
align-items: center;
}
.center {
width: 100%;
}
.wrap::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.wrap {
text-align: center;
}
.center {
display: inline-block;
vertical-align: middle;
}