-
div的水平垂直居中
-
定位+margin:auto(子元素未知宽高不能实现水平垂直居中)
<style> .out { width: 200px; height: 200px; background-color: yellow; position: relative; } .in { width: 100px; height: 100px; background-color: green; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style> <div class="out"> <div class="in"></div> </div>
-
table(子元素未知宽高可实现水平垂直居中)
.out { display: table; width: 100%; height: 400px; background: #666; } .in { display: table-cell; vertical-align: middle; text-align: center; background: red; } <div class="out"> <div class="in"></div> </div>
-
定位+translate(子元素未知宽高可实现水平垂直居中)
<style> .out { width: 200px; height: 200px; background-color: yellow; position: relative; } .in { width: 100px; height: 100px; background-color: green; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div class="out"> <div class="in"></div> </div>
-
flex(子元素未知宽高可实现水平垂直居中)
<style> .out { width: 200px; height: 200px; background-color: yellow; display: flex; justify-content: center; align-items: center; } .in { width: 100px; height: 100px; background-color: green; } <style> <div class="out"> <div class="in"></div> </div>
-
div的水平垂直居中
最新推荐文章于 2024-08-23 06:12:23 发布