css 实现DIV水平垂直居中于屏幕_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:26:06
原創
1674 人瀏覽過

 

css如何将div实现全屏水平垂直居中,本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码。

代码如下:

<!DOCTYPE html> <html> <head> <title>css 实现DIV水平垂直居中于屏幕</title><style type="text/css"> body{   margin:0px;   padding:0px; } #thediv{  width:100px;  height:100px;  background:green;  position:absolute;  left:50%;  top:50%;  margin-left:-50px;  margin-top:-50px;}</style> </head> <body> <div id="thediv"></div></body> </html>
登入後複製

在线运行

 

以上代码将div在网页中实现了全屏居中效果,下面简单介绍一下它的实现过程。

实现原理:

将div元素设置为绝对定位,然后设置它的left和right属性值分别为50%,这个时候div并没有居中,居中的是div的左上角,所以我们还需要再将其向上和向左拉动一定的距离即可,这个距离分别是高度和宽度的一半。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!