div垂直居中 css div盒子上下垂直居中

時間 2019-11-20

標籤 div 垂直居中 css 盒子上下欄目 CSS 简体版

原文原文鏈接

div垂直居中 css div盒子上下垂直居中,讓DIV盒子在任何瀏覽器中任何分辨率的顯示屏瀏覽器中處於水平居中和上下垂直居中。css

div垂直居中經常使用於單個盒子，如一個頁面裏只有一個登陸佈局，使用div css讓這個登陸佈局水平和css垂直居中。html

這裏介紹一種最簡單兼容性最好的水平居中與上下垂直居中的方法。瀏覽器

一、具體實例代碼以下佈局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上下垂直居中在線演示 DIVCSS5</title>
<style>
#main {position: absolute;width:400px;height:200px;left:50%;top:50%;
margin-left:-200px;margin-top:-100px;border:1px solid #00F}
/*css註釋：爲了方便截圖，對CSS代碼進行換行*/
</style>
<body>
<div id="main">DIV水平居中和上下垂直居中</div>
</body>
</html>

這裏設置一個「#main」對象樣式，寬400px,高200px，使用了絕對定位position樣式同時使用絕對定位left和top，而且同時設置margin-top和margin-left,爲了觀察到效果，因此對此div盒子加了個紅色邊框。字體

二、實例截圖spa

div+css實現div對象同時上下垂直居中和水平居中截圖xml

三、水平垂直居中原理介紹
這裏使用了絕對定位position:absolute，使用left和top設置對象距離上和左爲50%，但若是設置50%，實際上盒子是沒有實現居中效果，因此又設置margin-left:-200px;margin-top:-100px;，這裏有個技巧是，margin-left的值是寬度一半，margin-top的值也是對象高度一半，同時設置爲負，這樣就實現了水平和垂直居中。htm

相關CSS教程推薦：
1）、CSS圖片居中
2）、html文字居中
3）、css字體居中
4)、div水平居中
5）、css字體垂直居中
6）、div css佈局居中代碼
7）、ie9文字字體垂直居中對象

四、在線演示：查看案例blog

五、完整案例html+css打包下載：

當即下載（0.589KB）

如需轉載，請註明文章出處和來源網址：http://www.divcss5.com/jiqiao/j645.shtml