首页 建站教程 WEB前端 正文

DIV内容居中

方法一:<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>任意盒子居中calc</title> <style type="t...

方法一:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>任意盒子居中calc</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        .element{
            height:100%;
            width: 100%;
            background-color:blue;
            position: relative;
        }

        .element img{
            position: absolute;
            /* css3可以计算属性 */
            top:calc(50% - 150px);
            left:calc(50% - 225px);
        }
 
    </style>
</head>
<body>

<div>
    <img src="http://www.umtheme.com/zb_users/upload/2017/03/201703261490505576415367.jpg" alt="" />
</div>
</body>
</html>


方法二

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8" />
     <title>任意盒子居中css3</title>
     <style type="text/css">
         *{
             margin:0;
             padding:0;
         }
         html,body{
             height:100%;
             background-color:red;
         }
         .element{
             height:100%;
             width: 100%;
             background-color:blue;
             position:relative;
         }
         .element img{
             position:absolute;
             top:50%;
             left:50%;
             
             -webkit-transform: translate(-50%,-50%);
                -moz-transform: translate(-50%,-50%);
                 -ms-transform: translate(-50%,-50%);
                  -o-transform: translate(-50%,-50%);
                     transform: translate(-50%,-50%);
         }
 
     </style>
 </head>
 <body>
 <div>
     <img src="http://www.umtheme.com/zb_users/upload/2017/03/201703261490505576415367.jpg" alt="" />
 </div>
 </body>
 </html>


定位居中:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>定位与居中</title>
    <style>
*{
    padding:0;
    margin:0;
}
.wrapper{
    width:400px;
    height:200px;
    background-color:#ccc;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
    margin:auto;
}
.style{
    position:absolute;
    width:100px;
    height:100px;
    border-radius:50px;
    background:#fc0;
}
.rt{
    top:-50px;
    left:-50px;
}
.lb{
    bottom:-50px;
    right:-50px;
}
    </style>
</head>
<body>
    <div>
        <div class="style rt"></div>
        <div class="style lb"></div>
    </div>
</body>
</html>


任意居中:

<html>
<head>
    <meta charset="UTF-8" />
    <title>任意盒子居中display:table</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        .element{
            height:100%;
            width: 100%;
            background-color:blue;
            text-align: center;
            display:table;
        }
        .element .img{
            display:table-cell;
            vertical-align:middle;
        }
    </style>
</head>
<body>
<div>
   <div>
        <img src="1.jpg" alt="" />
   </div>
</div>
</body>
</html>


打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:http://www.umtheme.com/web/20.html

相关推荐

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 27

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 74

给网页增加WOW插件滚动触发css动效

随着浏览器的兼容性增强,css3动画特效运用也越来越广,通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。优...

WEB前端 2018.07.04 0 3668

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持