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支持。但,其效果非常好,可以用在华丽的用户界面上。

举报

相关文章推荐

div水平垂直居中

水平居中 /*兼容IE8以上,修改CSS后可兼容IE6、7*/ .child1{ display: inline-block; ...

css实现div水平、垂直居中

示例1: /* 固定宽高div,在浏览器中保持水平、垂直居中 */ #div1 { width:400px; height:300px; position:absolute;...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

css实现div垂直水平居中

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

CSS水平垂直居中

水平居中水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中, 即父元素必须是块级盒子容器,父元素宽度必须已经被设定好以下讨论 参考这个结构 non-child ...

CSS 水平垂直居中

块级元素 水平垂直居中 fdsa 1.方法一.wrap { width: 800px; height: 500px; border: 1px solid blue; ...

css 水平垂直居中

在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题。 1、如果是单行文本。看代码:   ...

DIV水平居中、垂直居中

一、CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题。 可是这个方法有时候完全不...

div水平居中与垂直居中

CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实...

CSS水平居中与垂直居中

CSS水平居中与垂直居中总结: 累计 7 种水平居中 , 5 种垂直居中, 4 种垂直水平同时居中。

CSS垂直居中和水平居中

前言 CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了。 ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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