水平居中:
- 行內元素居中
text-align: center; - 定寬塊級元素居中
width: 300px;
margin: 0 auto; - 不定寬塊級元素居中
- display:table;
margin:0 auto;- position: relative;
left: 50%; //將div邊界浮動到50%
垂直居中:
- 定高單行文本
height: 100px;
line-height: 100px; - 定高多行文本等
- height: 200px; //隨意高度
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
margin: auto;- height:200px;
position:absolute;
top:50%;
margin-top: -100px;
- 不定高
display: flex;
justify-content: center;
align-items: center;
垂直水平居中:
- 不定高寬
父:
position: relative;
子:
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%; - 不定高寬
display: flex;
justify-content: center;
align-items: center;