CSS實現垂直居中
阿新 • • 發佈：2020-08-05
1.flex佈局
先渲染出一個正方形
<body>
<div class="box"></div>
</body>
<style> .box{ width: 300px; height: 300px; background-color: red; } </style>
將元素的父類設定flex佈局
<style> html,body{ width: 100%; height:100%; margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; } </style>
效果如圖
2.定位
<style> html,body{ width: 100%; height: 100%; margin:0; padding: 0; } .box{ width: 300px; height: 300px; background-color: red; margin: 0 auto; //實現水平居中 position: relative;//相對定位 top: calc(100vh/2);//頂部高度為螢幕的一半 transform: translateY(-50%);//沿Y周向上移元素的一半 }</style>