tft每日頭條

 > 生活

 > css代碼圖像垂直居中

css代碼圖像垂直居中

生活 更新时间:2025-02-03 08:08:06

css代碼圖像垂直居中(實現垂直水平居中)1

以下是小朋友給我提的問題和我的答案:

問:CSS如何實現垂直水平居中

答 : 實現方法有很多種,以下是其中一種實現:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrapper { position: relative; width: 500px; height: 500px; border: 1px solid red; } .content{ position: absolute; width: 200px; height: 200px; /*top、bottom、left和right 均設置為0*/ top: 0; bottom: 0; left: 0; right: 0; /*margin設置為auto*/ margin:auto; border: 1px solid green; } </style> </head> <body> <div class="wrapper"> <div class="content"></div> </div> </body> </html>

css代碼圖像垂直居中(實現垂直水平居中)2

代碼簡單,自己理解,或者複制到一個文件裡面嘗試一下。

問:px和em的區别

答:px的值是固定的,指定是多少就是多少,計算比較容易。em得值不是固定的,并且em會繼承父級元素的字體大小。

浏覽器的默認字體高都是16px。所以未經調整的浏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

這個并不是絕對的,一般手機類的自适應界面都會用em作為單位,px主要用來做電腦客戶端的界面

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved