時間(jiān)：2022-11-17 浏覽量： 收藏
css代碼居中的方法：
1、定位法【position:absolute】；
如果子級div有定義寬和高(gāo)的話就(jiù)可(kě)以用這(zhè)個方法。注意：margin-top,和margin-left的值均爲高(gāo)和寬值的一半。
簡體(tǐ)中文
繁體中文
<style>
div{
position: absolute;/* 或者使用fixed */
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
width: 300px;
height: 200px;
background-color: #f00;
}
</style>
<body>
<div> </div>
</body>2、使用【margin:auto】法；
這(zhè)個也可(kě)以是(shì)定位法。用這(zhè)個方法要(yào)求子級div必須設置寬的值，不(bù)然沒有效果哦~margin:auto是(shì)水(shuǐ)平垂直都居中，如果僅僅設置水(shuǐ)平居中，可(kě)設置爲margin:auto 0;同理，如果僅僅設置垂直居中，可(kě)設置爲margin:0 auto。
<style>
div{
position: absolute;/* 或者使用fixed */
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 300px;
height: 200px;
background-color: #f00;
}
</style>
<body>
<div> </div>
</body>3、使用【display:table-cell】法；
這(zhè)個方法主要(yào)針對多(duō)行(xíng)文字內(nèi)容的垂直居中對齊。注意：text-align:center設置了文字的水(shuǐ)平居中對齊，vertical-align:middle設置的是(shì)垂直居中對齊。
<style>
div{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 200px;
background-color: #f00;
margin: auto;
}
p{
display: inline-block;
vertical-align: middle;
width: 150px;
height: 100px;
border: 1px solid #ccc;
color: #fff;
}
</style>
<body>
<div>
<p>多(duō)行(xíng)文字內(nèi)容，居中設置效果</p>
</div>
</body>4、使用【transform:translate(x,y)】法。
這(zhè)個是(shì)css3中的新屬性，如果子級元素沒有設置寬和高(gāo)值的話可(kě)以用這(zhè)個方法來(lái)實現(xiàn)。這(zhè)在我們做自(zì)适應頁面的時候可(kě)以用到。
<style>
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<body>
<div>transform:translate(x,y)方法，絕對居中效果</div>
</body>
RELATED RECOMMEND
2022-11-17
外(wài)貿電(diàn)商領域 Twitter 已成爲一種極具潛力的推廣工(gōng)具，能夠爲外(wài)貿網站(zhàn)快(kuài)速導入大(dà)量流量，是(shì)外(wài)貿電(diàn)商發展的時代趨勢。一、将 Twitter 和外(wài)貿網站(zhàn)關聯起來(lái)（一）添加 Twitter 分(fēn)享按鈕在網站(zhàn)添加 Twitter 分(fēn)享按鈕意義重大(dà)。這(zhè)不(bù)僅方便客戶将網站(zhàn)産品、內(nèi)容分(fēn)享到他們自(zì)己的 Twitter，更關鍵的是(shì)，每當網站(zhàn)更新産品或文章時，我們自(zì)己要(yào)把更新內(nèi)容分(fēn)享到自(zì)己的 Twitter 上。如
2022-11-17
在當今的網絡世界中，富媒體(tǐ)對于大(dà)家(jiā)來(lái)說早已不(bù)是(shì)什麽新鮮事物(wù)，特别是(shì)谷歌(gē)廣告中頻繁出現(xiàn)的富媒體(tǐ)展示形式，那真是(shì)令人(rén)眼花缭亂。然而，你可(kě)能不(bù)知道(dào)的是(shì)，在自(zì)然排名結果裡(lǐ)同樣蘊含着豐富多(duō)樣的富媒體(tǐ)內(nèi)容。這(zhè)些富媒體(tǐ)元素就(jiù)像是(shì)一把神奇的鑰匙，即使我們的網站(zhàn)在搜索結果中處于較低(dī)排名（比如首頁非前三的位置），也能憑借它們開(kāi)啓獲取更多(duō)用戶互動的大(dà)門，讓原本激烈的關鍵詞排名競争變得不(bù)再那麽殘酷。那麽，作爲 SEO 從(cóng)
2022-11-17
外(wài)貿網站(zhàn)提示用戶是(shì)否接受cookie是(shì)因爲cookie對網站(zhàn)及用戶都有好處，但(dàn)同時也可(kě)能對用戶的隐私造成影響。Cookie是(shì)一種小(xiǎo)型文檔，由網站(zhàn)發送到用戶的設備上，用于記錄用戶的行(xíng)爲和偏好，從(cóng)而提供個性化(huà)的浏覽體(tǐ)驗。它們可(kě)以記錄用戶的登錄狀态、購(gòu)物(wù)車信息等，以便用戶下次訪問(wèn)時無需重新輸入。同時，cookie還幫助網站(zhàn)分(fēn)析用戶行(xíng)爲，如頁面浏覽量、停留時間(jiān)和點擊次數等，爲網站(zhàn)
Copyright © 2012-2024 世敏網絡 版權所有 京ICP證000000号 
閩公網安備 35020502000640号
關鍵詞聚合
