div垂直居中

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>上下垂直居中 在线演示 DIVCSS5</title>

<style>

#main {position: absolute;width:400px;height:200px;left:50%;top:50%;

margin-left:-200px;margin-top:-100px;border:1px solid #00F}

/*css注释：为了方便截图，对CSS代码进行换行*/

</style>

<body>

<div id="main">DIV水平居中和上下垂直居中<a href="http://www.divcss5.com/">DIVCSS5</a></div>

</body>

</html>

div垂直居中

时间： 2024-08-06 11:08:56

div垂直居中的相关文章

如何让未知高度div垂直居中

如何让未知高度div垂直居中:让div垂直居中对齐方法有多种多样,可以使用CSS让div在父元素中垂直居中,但是如果在不知道div高度的情况下将其在父元素中实现它的垂直居中对齐有难度,因为涉及到浏览器兼容性,下面就介绍一下通过js让未知高度的div在父元素中垂直居中,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中. 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法. 1.具体实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &

css的div垂直居中的方法，百分比div垂直居中

我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-

兼容各个浏览器的未知高度div垂直居中效果

兼容各个浏览器的未知高度div垂直居中效果:让div垂直居中与它的父对象中,并不像是让div在父元素中水平居中那么简单,只要简单的为此元素设置margin:0px auto即可,虽然将一些属性配合使用也可以将div垂直居中与父元素中,但是在某些浏览器中并不兼容,下面就介绍一种兼容各大浏览器的方式.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

CSS教程:div垂直居中的N种方法[转]

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertic

简单方便的div垂直居中。

此处讨论的是,在一个父容器中只有一个DIV,这个DIV相对于父元素垂直居中的问题: 以下列举三种方式:这里为了层次清晰,都是采用的sass写法. 一:适用于子元素有具体的宽高 .wrap{ //父元素可以不定义任何属性 .content{ position:absolute; height:100px; top:50%; margin-top:-50px;//自身高度的一半}} 二:适用于子元素和父元素都没有具体的宽高 .wrap{ display:table;//父元素必须要有的样式属性 .c

div垂直居中(js)

window.onload = function(){ var xx = document.documentElement.clientHeight; // 470为要垂直居中的div的高度 he = (xx-470)/2; console.log(he); document.getElementsByClassName('weixin_public')[0].style.marginTop = he + 'px'; } 通过以上的js控制即可达到垂直居中的效果

div垂直居中的N种方法单行/多行文字(未知高度/固定高度)

说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有 valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用verti