`
李俊良
  • 浏览: 146108 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css控制div绝对居中问题

 
阅读更多 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Matching Game </title>
<meta name="generator" content="editplus" />
<meta name="author" content="lijunliang" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
html,body{
	height:100%;
}
.wrapper{
	height:100%;
}
.left{
	width:300px;
	margin-right:-300px;
	background-color:yellow;
	height:100%;
	float:left;
}
.right{
	margin-left:300px;
	background-color:black;
	height:100%;
	position:relative;
}
.centerit{
	height:200px;
	width:300px;
	top:50%;
	left:50%;
	position:absolute;
	background-color:white;
	margin-top:-100px;
	margin-left:-150px;
}
</style>
</head>
<body>
	<div class="wrapper">
		<div class="left"></div>
		<div class="right">
			<div class="centerit">
				<div class="inner">
					i am in the center
				</div>
			</div>
		</div>
	</div>
</body>
</html>
 
分享到：
| 网易的两栏布局，左侧固定宽度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV+CSS上下左右绝对居中

    在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`&lt;div&gt;`...

    div+css垂直居中和水平居中

    在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的关键。我们将探讨不同情况下的居中策略，并结合给出的`juzhong.html`示例文件进行讲解。 1. **单行文本水平居中**： 使用`text-align: center;...

    DIV+CSS 图片垂直居中效果

    在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`&lt;div&gt;`元素是一...

    关于CSS控制DIV水平居中问题

    关于CSS 控制DIV水平居中问题，我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书，那个里面谈到居中使用。 margin-left:auto;margin-right:auto; 其实等同于： margin:0 auto; 　于是可以使用这种方式，...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...

    DIV绝对居中例子

    要使`div`在页面上居中，我们需要通过CSS来控制它的位置。 1. **CSS定位基础**： - `position`属性：设置为`relative`、`absolute`或`fixed`可以使元素脱离正常文档流，从而允许我们通过`top`、`right`、`bottom`...

    div+css实现div的多层重叠，并且居中显示

    我们在制作网页时，有时需要多重div的重叠，每个div添加不同的内容，以实现特殊的层叠效果，这个如何实现，在网上没找到现成的详细的教程，但是可以用现有的...源代码+自己写的教程，希望对初学div+css的朋友有启发。

    css控制div中元素居中的示例.pdf

    CSS 控制 div 中元素居中的示例 本文将讨论 CSS 中常见的让元素水平居中显示的方法。这些方法可以让开发者更好地控制 div 中元素的布局，以实现更好的用户体验。 1. 使用自动外边距实现居中 CSS 中首选的让元素...

    div水平居中的方法

    CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法

    CSS网页布局DIV水平居中的各种方法

    CSS 网页布局 DIV 水平居中的各种方法 在现代浏览器中，实现 DIV 的水平居中是一件非常简单的事情。下面我们将详细介绍几种常见的方法。 方法一：使用 margin:auto 这种方法是最简单的，直接将 DIV 的 margin ...

    使用css实现div垂直居中的示例

    本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...

    DIV+CSS水平垂直居中

    DIV+CSS 水平垂直居中是Web开发中一个常见的问题，如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用...

    CSS 图片水平垂直居中于DIV

    在网页设计中，将图片水平垂直居中于一个DIV元素是常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何实现这个效果，并提供相关的源码示例。 首先，我们要明白CSS中的定位机制，包括静态定位、相对定位、...

    js+CSS实现弹出居中背景半透明div层的方法.docx

    1. 使用 CSS 将 div 层设置为绝对定位，并将其宽度和高度设置为 100%。 2. 使用 JavaScript 控制 div 层的显示和隐藏。 3. 使用 CSS 中的 opacity 属性或 filter 属性来实现背景半透明效果。 下面是实现弹出居中...

    JS+CSS 控制Img在div中居中显示一部分

    JS+CSS 控制Img在div中居中显示一部分

    CSS+DIV设计实例：实现让多个DIV排列时居中

    CSS+DIV设计实例：实现让多个DIV排列时居中.txt

    css+div控制表格 标签代码

    `div`元素常作为容器，通过CSS的`position`属性（如`relative`、`absolute`、`fixed`）配合`top`、`right`、`bottom`、`left`属性，可以实现表格的绝对定位，从而实现浮动表格或其他特殊布局效果。 最后，我们还...

Magicbox
Global site tag (gtag.js) - Google Analytics