當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端二十九:两个盒子居中的练习

發(fā)布時間：2025/6/15 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了前端二十九:两个盒子居中的练习小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>/* 有一個大的div,寬500,高300.在大的div中有一個小的div,寬200,高100現(xiàn)在需要將小的div放在大的div中間位置(水平和上下都居中),并且兩個盒子的寬高都不能改變.*//*方法一:.father{width:200px;height: 100px;border: 1px solid red;padding: 100px 150px;}.son{width:200px;height: 100px;border: 1px solid blue;} *//*方法二:*/.father{width:350px;height: 200px;border: 1px solid red;padding-top: 100px;padding-left: 150px;}.son{width:200px;height: 100px;border: 1px solid blue;} </style> </head> <body><div class="father"><div class="son"></div></div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的前端二十九:两个盒子居中的练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。