CSS多種方式實現元素水平垂直居中
阿新 • • 發佈:2021-07-28
html結構:
<div class="center">確定寬高水平垂直居中</div> <div class="center2">不確定寬高水平垂直居中</div> <div class="center3">確定寬高水平垂直居中2</div> <div class="center4"><span>flex水平垂直居中</span></div> <div class="center5"><span>table-cell水平垂直居中</span></div>
css樣式:
.center{ position: absolute; background: blue; width: 200px; height: 200px; text-align: center; line-height: 200px; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; } .center2{ position: absolute; left:50%; top: 50%; transform: translate(-50%, -150%); background: red; } .center3{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: 100px; height: 100px; background: green; } .center4{ background: orange; display: flex; justify-content: center; align-items: center; height: 100px; } .center5{ display: table-cell; vertical-align: middle; text-align: center; height: 300px; width: 400px; background: red; }
PS:僅作記錄.