當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3 transform实现水平和垂直居中

發布時間：2023/12/2 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3 transform实现水平和垂直居中小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html, body {height: 100%;}.wrapper {position: relative;width: 100%;height: 100%;background: url("background.jpg") center no-repeat;background-size: cover;}.wrapper .login {position: absolute;width: 255px;height: 300px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #eee;}</style> </head> <body><div class="wrapper"><div class="login"></div></div> </body> </html>

轉載于:https://www.cnblogs.com/yeqrblog/p/8961264.html

總結

以上是生活随笔為你收集整理的css3 transform实现水平和垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。