垂直居中 解决方法
使用flex解決垂直居中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {padding:0;margin: 0;box-sizing: border-box;}/*使用absolute和translate，垂直居中*//*body {*//*padding:1em calc(50% - 450px);*//*background-color: mistyrose;*//*}*//*main {position: absolute;top:50%;left: 50%;!*根據(jù)自身的width，height進行百分比偏移*!transform: translate(-50% , -50%);width:40%;padding: 1em;background-color: grey;}*//*main {*//*margin: 50vh auto 0;*//*padding: 1em 1.5em;*//*width: 28em;*//*background-color: grey;*//*transform: translateY(-50%);*//*}*//*更好的方法，使用flex*/body {display: flex;height: 100vh;background-color: antiquewhite;}main {margin: auto;display: flex;align-items: center;justify-content: center;flex-flow: column;width: 28em;height: 10em;background-color: gray;}</style> </head> <body> <main><h1>Am I centered yet?</h1><p>Center me, please!</p> </main> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/scnuwangjie/p/5832923.html
總結(jié)
- 上一篇： inverser
- 下一篇： 2 Powershell与Cmd以及Un