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

编程问答

元素水平垂直居中的几种常用方法

發布時間：2025/3/14 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了元素水平垂直居中的几种常用方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>元素水平垂直居中</title><style>/*方式一*/.box{width: 100px;height: 100px;background: red;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}/*方式二*/.box{width: 100px;height: 100px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50px,-50px);/*或者transform: translate(-50%,-50%);*/}/*方式三技巧*/.box{width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}/*方式四彈性盒*/.father{display: flex;width: 400px;height: 400px;background: red;justify-content: center;align-items: center;}.son{width: 100px;height: 100px;background: aqua;}</style></head><body><div class="box">我需要用多種方式居中你</div><div class="father"><div class="son"></div></div></body> </html>

轉載于:https://www.cnblogs.com/lhl66/p/8724939.html

總結

以上是生活随笔為你收集整理的元素水平垂直居中的几种常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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