css 寬高未知的子元素在父容器上下左右居中
阿新 • • 發佈：2019-01-04
1，方法一
效果
程式碼
<!--Created by Sukla on 2018/3/27.--> <!DOCTYPE html> <html> <head lang="en"> <title>未知寬高上下左右居中</title> <meta charset="utf-8"> <style> .container{ display: table-cell; width: 500px; height: 500px; text-align: center; vertical-align: middle; background-color: #000000; } .item{ display: inline-block; width: 100px; height: 50px; background-color: #ff6600; } </style> </head> <body> <div class="container"> <div class="item"></div> </div> </body> </html>
2、方法2
效果
程式碼
<!--Created by Sukla on 2018/3/27.--> <!DOCTYPE html> <html> <head lang="en"> <title>未知寬高上下左右居中</title> <meta charset="utf-8"> <style> .container{ width: 500px; height: 500px; position: relative; background-color: #000000; } .item{ width: 50px; height: 100px; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: #22bd7a; } </style> </head> <body> <div class="container"> <div class="item"></div> </div> </body> </html>