欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS3小教程:图片或者DIV水平垂直居中
这篇文章主要为大家详细介绍了CSS3小教程:图片或者DIV水平垂直居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

居中是网页制作中最最常见,也是最常用到的。所有关于居中是网页制作的重中之重,但是很多朋友对于居中却不是很熟悉和了解,当然平常的剧中我们都知道使用

text-align:center;

或者使用

margin:0 auto

这些都是最为基本的,今天我们给大家介绍的是图片或者DIV水平垂直居中,也就是整个屏幕绝对居中,无论是水平方向还是垂直方向。这个需要如何实现呢?

我们先来看一段代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现DIV垂直水平居中代码 - 361模板 - www.ke361.com</title>
<style type="text/css">
.ke361 {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
width: 300px;
height: 200px;
z-index: 99;
background: red;
}
</style>
</head>
<body>
<div class="ke361"></div>
</body>
</html>

代码运行效果演示:

查看效果

代码解析:

首先设置div为绝对定位,然后将其top和left值分别设置为50%,但是这样并没有实现div的中心点垂直水平居中,而是将div的左上角实现了垂直水平居中,所以还得利用margin设置一下,将上边距和左边距分别设置为负数,尺寸分别是高和宽的一半,这样就实现中心点垂直居中了。

上面的方法您学会了吗?如果你能理解得很好,下面361模板再给大家展开讲解页面全方位定位代码;

<html>  
    <head></head>  
    <style type="text/css">  
        .divStyle{   
            position:absolute;   
            width:100px;   
            height:100px;   
            background:red;   
            color:#fff;   
            line-height:100px;   
            text-align:center;   
        }   
        #topLeft{left:0;top:0;}   
        #topMiddle{left:50%;top:0;margin-left:-50px;}   
        #topRight{right:0;top:0;}   
        #middleLeft{left:0;top:50%;margin-top:-50px;}   
        #middleMiddle{left:50%;top:50%;margin-top:-50px;margin-left:-50px;}   
        #middleRight{right:0;top:50%;margin-top:-50px;}   
        #bottomLeft{bottom:0;left:0;}   
        #bottomMiddle{bottom:0;left:50%;margin-left:-50px;}   
        #bottomRight{bottom:0;right:0;}   
    </style>  
    <body>  
<div style="height:3000px;"></div>
        <div id="topLeft" class="divStyle">topLeft</div>       
        <div id="topMiddle" class="divStyle">topMiddle</div>       
        <div id="topRight" class="divStyle">topRight</div>     
        <div id="middleLeft" class="divStyle">middleLeft</div>     
        <div id="middleMiddle" class="divStyle">middleMiddle</div>     
        <div id="middleRight" class="divStyle">middleRight</div>       
        <div id="bottomLeft" class="divStyle">bottomLeft</div>     
        <div id="bottomMiddle" class="divStyle">bottomMiddle</div>  
        <div id="bottomRight" class="divStyle">bottomRight</div>           
    </body>  
</html>

运行效果如下:

页面全方位定位代码

最后提下这样的定位的应用,一般可以用在广告投放,信息弹出等用途中。

以上就是CSS3小教程:图片或者DIV水平垂直居中的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: CSS3 水平垂直居中 屏幕居中

上一篇PHP判断字符串中是否含有中文

下一篇CSS小课堂:页面背景动态效果教程

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在