垂直居中四種方法
阿新 • • 發佈:2019-01-09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直水平居中</title> </head> <style> /*垂直水平居中方法一:position*/ /*.parent{ width: 800px; height: 600px; background: red; position: relative; } .child{ width: 300px; height: 200px; background: black; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; }*/ /*垂直水平居中方法二:flex*/ /*.parent{ width: 800px; height: 600px; background: red; display: flex; align-items:center; justify-content:center; } .child{ width: 300px; height: 200px; background: black; }*/ /*垂直水平居中方法二:transform*/ /*.parent{ width: 800px; height: 600px; background: red; position: relative; } .child{ width: 300px; height: 200px; background: black; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }*/ /*垂直水平居中方法四:table*/ .wrp { width: 500px; height: 500px; background-color: #0022df;/* 外:藍色 */ display: table; } .subwrapper { display: table-cell; vertical-align: middle; } .content { width: 250px; height: 250px; background-color: #aa0021;/* 外:紅色 */ margin: 0 auto; } </style> <body> <!--<div class="parent"> <div class="child"> </div> </div>--> <div class="wrp"> <div class="subwrapper"> <div class="con content"> </div> </div> </div> </body> </html>