css div水平、垂直同时居中的实现方法

发布时间:2020-04-01编辑:脚本学堂
本文介绍下,css实现div同时水平居中、垂直居中的一例代码,有需要的朋友参考下。

本节内容:
css实现div水平、垂直同时居中

先来看一个基本的居中效果,css控制div水平居中
创建一个div的水平居中很简单,只需要设定宽度和左右margin值自动。

此方法可以用在block级元素上(div、图片、h1等)。
如果在inline元素上,必须使用display:block。
 

复制代码 代码示例:
.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

2,css控制div水平、垂直居中
控制div的水平和水质居中,需要预先知道div的宽度和高度。
首先,设定绝对定位,这样可以把元素从周围分离出来,相对于window定位。
然后,设定左上居中50%定位,这样就可以中间了。
最后,设定div的左上的定位为负值,分别为宽高的一半。

例子:
 

复制代码 代码示例:
.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

附,css+jquery实现div水平、垂直居中效果。
使用div+css只能是先定了宽高的div水平和垂直居中。
 

复制代码 代码示例:
$(window).resize(function(){  
   $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});
 
// To initially run the function:
$(window).resize();

以上方法:
只是在浏览器窗口改变时,动态计算div的高度和宽度,完成了div的宽度和高度计算。

缺点:必须javascript支持。

>>> 查看更多 css 居中 相关教程 <<<