DW怎么設置DIV模塊在頁面中居中?
我要評論Dreamweaver中margin、padding可以讓div模塊在頁面居中，但如果是自適應所有屏幕，包括手機屏幕依然可以自動上下左右居中，該怎么設置呢？下面我們就來看看詳細的教程。
1、先新建一個html文件，并在head中添加樣式表【<style type="text/css"></style>】。
2、在body中添加一個DIV，并引入一個CSS，命名為【aaa】。
3、給這個DIV添加背景色，并定義它的寬和高?！?span style="color: #ff0000">background: #FA2;width: 400px;height: 600px;】。
4、然后添加如下代碼。【position: fixed; left: 50%; top: 50%; z-index: 10;】。z-index是讓DIV模塊始終在最上端，也可以不添加?？梢钥吹紻IV塊到了右下角的位置。
5、然后我們依次定義它的位置。先使用【margin-top: -300px;】“-300px”這個數(shù)值就是DIV高height: 600px;的一半，并添加為負值。可以看到DIV已經(jīng)默認到上下居中的位置了。
6、先使用【margin-left: -200px;】“-200px”這個數(shù)值自然就是DIV寬width: 400px;的一半，并添加為負值。保存后刷新網(wǎng)頁可以看到DIV已經(jīng)左右居中了。
7、可以看到不管我們把頁面變成什么尺寸，DIV都會自動居中，是不是解決你的問題了呢？
以上就是DW讓DIV模塊在頁面中相對屏幕自動居中的教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
DreamWeaver文字怎么居中對齊? dw垂直居中對齊的技巧
相關文章
dreamweaver怎么新建收藏夾并歸類資源？dreamweaver中收藏了很多東西，為了方便查找我們可以根據(jù)資源類型歸類，下面我們就來看看dreamweaver新建收藏夾并歸類的教程，需要2018-01-09
Dreamweaver怎么使用css選擇器中的類？Dreamweaver中css選擇器中有很多功能，想要使用其中的類，該怎么使用呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-09
Dreamweaver文件頭部信息有什么作用? dw查看文件頭部信息的教程
Dreamweaver文件頭部信息有什么作用？Dreamweaver制作的網(wǎng)頁由兩部分組成，一個是頭部信息，一個就是主體信息，今天我們就來介紹一下dw查看文件頭部信息的教程，需要的朋友2018-01-09
Dreamweaver網(wǎng)頁中的文本怎么添加背景色?
Dreamweaver網(wǎng)頁中的文本怎么添加背景色？Dreamweaver設計的網(wǎng)格，想要一小段文本中的文字添加背景色，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-08
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接?
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接？Dreamweaver設計的網(wǎng)頁想要添加聯(lián)系我們的文字直接鏈接到電子郵箱，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參2018-01-05
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片?
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片？Dreamweaver設計的文本網(wǎng)頁太單調，想要給文本添加星空背景圖片，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參2018-01-05
Dreamweaver怎么添加邊框? Dreamweaver邊框的制作方法
Dreamweaver怎么添加邊框？Dreamweaver想要制作一個紅色邊框，該怎么制作呢？下面我們就來看看Dreamweaver邊框的制作方法，需要的朋友可以參考下2018-01-04
Dreamweaver網(wǎng)頁怎么添加彈出窗口信息?
Dreamweaver網(wǎng)頁怎么添加彈出窗口信息？很多網(wǎng)站都有歡迎信息的彈窗，想要給網(wǎng)頁添加一個彈窗，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-04
Dreamweaver怎么上傳站點到服務器？Dreamweaver中制作好的玩野想要上傳到服務器，該怎么上傳站點呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-03
Dreamweaver怎么設置狀態(tài)欄文本？Dreamweaver設計網(wǎng)頁的時候，想要制作在狀態(tài)欄制作顯示歡迎的話語，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-03
