絕對定位元素的水平垂直居中的方法
本文主要介紹了絕對定位元素的水平垂直居中的方法，有3種方法可供參考，需要的朋友一起來看下吧
1.css實現居中
缺點：需要事先知道元素的寬度和高度。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>2、css3實作水平垂直居中
注意：無論元素的尺寸是多少，都可以居中。不過IE8以上才相容於這種寫法，行動端可忽略。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>3、margin：auto實作居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>更多絕對定位元素的水平垂直居中的方法相關文章請關注PHP中文網！
#
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
3060顯示卡的性能如何？
Jan 27, 2024 am 10:36 AM
有很多遊戲玩家對顯示卡3060表示非常好奇，想入手一張3060的顯示，但是不知道RTX3060是在一個什麼水平，其實這款顯示卡也是在一個比較主流的水平。 3060顯示卡什麼水準：答：主流水準。這款RTX3060顯示卡非常受廣大玩家的歡迎，而且也在熱賣中，其擁有RTX30的系列特有的優點，性價比非常高，對遊戲畫面要求較高的玩家可以選擇這張顯示卡。 3060顯示卡拓展介紹：幀率：被廣大玩家喜愛，擁有12GB的大顯存，非常受歡迎。在12GB的大顯存下，能夠流暢運行起3A大作無任何卡頓，幀數甚至可達到60。性價比：它
WPS表格居中怎麼設定
Mar 19, 2024 pm 09:34 PM
隨著WPS的功能越來越強大，我們遇到的關於功能使用的問題也越來越多。在WPS中，我們常常會使用到WPS表格，如果我們需要列印WPS表格，為了讓表格看起來美觀，這時候我們需要讓表格居中。那麼，問題來了，我們該如何讓WPS表格居中呢？今天我在這裡分享一下教程，希望能夠幫助你們！步驟詳情：1、我以實戰操作來講解，以下是我用WPS表格製作了一個簡單的表格。 2.透過列印預覽，我們可以發現，WPS表格預設是居左的。如果我們要是想把表格居中的話該怎麼辦呢？ 3.這時候，我們需要點選【工具列】中的【頁面佈局】的
評測麒麟9000s的表現與水平
Mar 18, 2024 pm 03:21 PM
麒麟9000s作為今年手機市場的一顆新星，備受關注。伴隨著智慧型手機市場的競爭日益激烈，作為華為公司的旗艦處理器，麒麟系列一直以來都備受矚目。而作為最新推出的一款處理器，麒麟9000s究竟表現如何，它的效能與水準又如何呢？以下將對麒麟9000s進行評測，從各方面來剖析其優劣。首先從性能方面來看，麒麟9000s採用了先進的5nm製程製造，整合了ARM最新的Co
如何將一個div居中在另一個div中？
Sep 08, 2023 am 11:13 AM
簡介div的居中對齊是前端開發最重要的方面之一。在本文中，我們將了解使用HTML和CSS將一個div置於另一個div中的技術。在本教程中，我們將有一個父div，它應該有子div。我們的任務是將子div放置在父div的中心。使用Transform翻譯和位置語法這不是一種非常流行的將一個div居中對齊到另一個div中的方法語法left:50%;top:50%;Transform:translate(-50%,-50%);上面的語法執行以下操作-CSS規則「left:50%;」將元素的水平位置設為其
在CSS中建立水平可滾動的部分
Aug 29, 2023 am 09:29 AM
水平可滾動的部分是常見的網頁設計模式，用於展示超出視窗寬度的內容。這種設計模式允許使用者水平滾動，提供了一種獨特而吸引人的方式來展示大型圖像、畫廊、時間軸、地圖和其他內容。這是透過使用CSS屬性，如overflow−x:auto或overflow−x:scroll來實現的。這使用本機瀏覽器功能進行水平滾動，並且跨裝置回應。允許輕鬆導航和探索內容。它不需要任何額外的庫或插件。演算法使用“container”類別定義容器元素。將容器的“overflow−x”屬性設為“auto”以啟用水平滾動。將容器
操作方法：如何調整Win11工作列圖示大小且居中顯示
Jan 03, 2024 am 08:17 AM
win11帶來了全新的介麵包括任務欄也進行了改變，但是呢很多的用戶使用的時候都感覺任務欄的圖標太大了不習慣，為此下面就給大家帶來了win11居中任務欄圖標變小操作方法，快來一起學習。 win11居中工作列圖示怎麼變小：1、說先用戶用戶要開啟進入登錄編輯程式。 2.然後依序展開：HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\。 3.然後在右邊新建一個「TaskbarSi」的DWORD值，將
如何在HTML中使文字方塊居中顯示
Feb 19, 2024 pm 11:01 PM
html文字方塊怎麼居中，需要具體程式碼範例在網頁設計中，居中對齊元素是一種常見的佈局需求。對於HTML文字框，想要使其居中顯示，可以透過幾種方法實現。以下將為大家詳細介紹一種常用的居中方式，並附上具體的程式碼範例。方法一：使用CSS樣式表中的居中屬性要實現文字方塊的居中顯示，可以利用CSS樣式表中的text-align屬性。將文字方塊所在的父容器元素設定為居中對齊即
前端技巧分享：使用CSS3 fit-content讓元素水平居中
Sep 09, 2023 pm 01:36 PM
前端技巧分享：使用CSS3fit-content讓元素水平居中在前端開發中，我們常常會遇到需要將某個元素水平置中的情況。使用CSS3的fit-content屬性可以很方便地實現這個效果。本文將介紹fit-content屬性的使用方法，並提供程式碼範例。 fit-content屬性是相對於元素父容器的長度值，可以根據內容的實際尺寸自動計算元素的寬度。透過將元
