css屏幕居中的方法(推薦)
發(fā)布時間：2010-07-20 23:40:05 作者：佚名 
我要評論
我要評論css實(shí)現(xiàn)的頁面元素屏幕垂直居中的方法，需要的朋友可以參考下。
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
position:absolute; //絕對定位
top:50%; //距頂部50%
left:50%;
margin:-100px 0 0 -200px; //設(shè)定這個div的margin-top的負(fù)值為自身的高度的一半,margin-left的值也是自身的寬度的一半的負(fù)值.(感覺在繞口令)
width:400px; //寬為400,那么margin-top為-200px
height:200px; //高為200那么margin-left為-100px;
border:1px solid red;
line-height:200px;
font-size:16px;
text-align:center;
z-index:99; //浮動在最上層
}
-->
</style>
<div>歡迎光臨腳本之家 www.dbjr.com.cn</div>
相關(guān)文章
- 如題，用html，css如何實(shí)現(xiàn)垂直居中。水平居中我們知道最簡便的方法就是margin:auto，但是margin只是相對寬度有效。2010-03-18
- 今天有人問起，晚上試著寫出來，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。 從最簡單的開始………… 一、如何讓一個DIV水平居2009-04-04
CSS讓圖片垂直居中和底端對齊的代碼-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
本CSS教程提供了兩種對齊方式即垂直居中對齊和底端對齊！更多內(nèi)容請參考本站的CSS視頻教程。 CSS使圖片垂直居中的代碼： <!DOCTYPE html PUBLIC "-//W3C//DT2008-10-17- 用過 Fireworks / PhotoShop 的人應(yīng)該都知道，在畫布中將一個頁面模塊居中是多容易的事，可如果是垂直居中，前端就苦逼了2011-10-30
- 在文字旁邊加上一個圖標(biāo)，通過css如何解決文字與圖片不能水平居中對齊的問題，下面有個示例，大家可以參考下2014-05-31
- 這篇文章主要介紹了通過CSS設(shè)置未知大小圖片在已知大小容器水平垂直居中，需要的朋友可以參考下2014-05-22
- 本文給大家?guī)淼氖?種使用CSS實(shí)現(xiàn)垂直居中的方法，雖然各有優(yōu)缺點(diǎn)，但還都是蠻實(shí)用的，小伙伴們根據(jù)自己的項(xiàng)目情況，自由選擇吧。2015-01-09
css中position:fixed實(shí)現(xiàn)div在窗口上下左右居中
實(shí)現(xiàn)div居中的方法有很多，本例介紹的使用css中position:fixed來實(shí)現(xiàn)div的上下左右居中，下面以一個DIV 元素在瀏覽器窗口居中為例2014-10-20css中position:fixed實(shí)現(xiàn)div居中上下左右居中
實(shí)現(xiàn)div居中的方法多如牛毛，本例為大家介紹的這個方法是使用css中position:fixed來實(shí)現(xiàn)div上下左右居中，這個小技巧比較使用，大家看看2014-10-14DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁面里文章文字居中都是非常重要的，而css來設(shè)置居中也是非常簡單的2014-10-09