css div的水平、垂直同时居中

转载 2013年12月05日 23:03:00

创建页面布局的时候,会遇到只是用纯粹的css控制div的垂直和水平居中。有很多种方法可以实现这种效果,这里列出我喜欢的。

首先是最基本的,

css控制div水平居中

创建一个div的水平居中很简单,只需要设定宽度和左右margin值自动。这种方法可以用在block级元素上(div、图片、h1等)。如果在inline元素上,必须使用display:block。

 
1 .className{
2     margin:0 auto;
3     width:200px;
4     height:200px;
5 }

css控制div水平、垂直居中

控制div的水平和水质居中,比较棘手,你需要预先知道div的宽度和高度。

首先设定绝对定位,这样可以把元素从周围分离出来,相对于window定位。然后设定左上居中50%定位,这样就可以中间了。最后设定div的左上的定位为负值,分别为宽高的一半。

 
1 .className{
2     width:300px;
3     height:200px;
4     position:absolute;
5     left:50%;
6     top:50%;
7     margin:-100px 0 0 -150px;
8 }

css+Jquery控制div水平、垂直居中

使用div+css只能是先定了宽高的div水平和垂直居中。看看jquery能做什么。

 
01 $(window).resize(function(){
02   
03     $('.className').css({
04         position:'absolute',
05         left: ($(window).width() - $('.className').outerWidth())/2,
06         top: ($(window).height() - $('.className').outerHeight())/2
07     });
08   
09 });
10   
11 // To initially run the function:
12 $(window).resize();

其实模仿的上一种办法,只是在浏览器窗口改变时,动态计算div的高度和宽度。偷巧的完成了div的宽度和高度计算。

缺点是必须JavaScript支持。但,其效果非常好,可以用在华丽的用户界面上。

css让div在整个网页水平、垂直居中解决方法

css让div在整个网页水平、垂直居中解决方法废话不说,直接上最终代码。 .div-out{ position: absolute; left:50%...
  • u014288743
  • u014288743
  • 2016年07月07日 12:25
  • 3261

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...
  • freshlover
  • freshlover
  • 2013年09月11日 21:06
  • 323869

纯CSS完美实现垂直水平居中的6种方式

纯CSS完美实现垂直水平居中的6种方式 时间 2016-07-29 13:12:19 SegmentFault 原文  https://segmentfault.com/a/119...
  • shiyuqiong
  • shiyuqiong
  • 2016年07月30日 22:16
  • 1680

div+css文本水平垂直居中,兼容ie、谷歌等浏览器

  • 2012年12月06日 15:21
  • 2KB
  • 下载

使用css3将一个div水平和垂直居中显示

使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位; ...
  • jingtian678
  • jingtian678
  • 2017年06月22日 16:43
  • 622

css实现div垂直水平居中

一、表格布局法 table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-alig...
  • WKY_CSDN
  • WKY_CSDN
  • 2017年05月11日 17:53
  • 1519

css实现div的水平和垂直居中

方案一: div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位;         2.margin: auto; 其width、...
  • qq_22855325
  • qq_22855325
  • 2017年04月27日 15:49
  • 1365

html中div如何水平和垂直居中的几种css方法代码

一、记录下几种盒子居中的方法: 1、margin固定宽高居中; 2、负margin居中; 3、绝对定位居中; 4、table-cell居中; 5、flex居中; 6、transform居中...
  • yuyuking
  • yuyuking
  • 2017年07月10日 09:30
  • 362

关于css中两层div的水平垂直居中问题

前段时间一直在忙于实验室的项目没有专门的时间来更新公众号,差点觉得自己就要就此放弃了。今天下午忙了一段时间后突然想起来了上次面试快的打车时候的一个题目,当时也算是浑浑噩噩没有说清楚,所以今天想专门拿出...
  • liujianhuan0622
  • liujianhuan0622
  • 2015年06月14日 20:07
  • 509

css让div在整个网页水平、垂直居中解决方法

css让div在整个网页水平、垂直居中解决方法废话不说,直接上最终代码。 .div-out{ position: absolute; left:50%...
  • u014288743
  • u014288743
  • 2016年07月07日 12:25
  • 3261
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css div的水平、垂直同时居中
举报原因:
原因补充:

(最多只允许输入30个字)