`
zsuczw
  • 浏览: 51743 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

纯css实现水平和垂直居中

CSSJavaScript浏览器HTML 
阅读更多
有时候我们需要实现一个水平居中和垂直居中的效果。例如你想做一个网页版的PPT，你希望演示的内容区域总是居中。这里介绍一个纯css实现。 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>水平和垂直居中</title>
<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}
	
	#wrapper {
		width: 960px;
		margin: 10px auto;
		border: 1px solid #efefef;
		height: 600px;
		position: relative;
	}
	
	#content {
		width: 600px;
		height: 400px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -200px 0px 0px -300px;
		border: 1px solid #343434;
	}
</style>
</head>
<body>
	<div id="wrapper" class="clearfix">
		<div id="content">
		</div>
	</div>
</body>
</html>


居中的原理其实很简单。首先使用绝对定位，使得内容区域的坐上顶点位于父容器的中心点上，然后分别向左和向上移动自己高度和宽度的一半。其中的数学原理就是：

假设子容器居中，那么其左上角的顶点坐标为  [x,y] = [（父容器的宽度 - 子容器的宽度）/2,(父容器的高度 - 子容器的高度)/2]

我们可以显示的使用javascript这样定位，但是使用css我们让浏览器的渲染引擎帮我们做了这件事。
0
顶
1
踩
分享到：
| 右边固定宽度+左边自适应宽度的两列布局方 ...
评论
发表评论

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

相关推荐

    CSS实现完美垂直居中 - 蓝色理想

    尽管现代布局更倾向于使用Flexbox和Grid，但旧版CSS中，可以将父元素设为`display: table`，子元素设为`display: table-cell`，并用`vertical-align: middle`来实现垂直居中。 10. **CSS `calc()` 函数**： 当...

    CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

    CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...

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

    在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...

    DIV+CSS水平垂直居中

    本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...

    CSS 图片水平垂直居中于DIV

    总之，实现CSS中的图片水平垂直居中是一个常见的挑战，但通过理解不同的布局模式和定位方式，我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中，这些技巧都将大有裨益。

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

    2. **Positioning and Offset**：通过定位技术和偏移量来实现垂直居中，这种方法主要针对不支持table display model的非标准浏览器。 #### 核心代码分析 下面是对上述方法的核心代码进行详细解释： ```css body {...

    css设置未知尺寸图片的水平和垂直居中

    /* 水平垂直居中 */ height: 100vh; width: 100%; background-color: #f0f0f0; } .container img { max-width: 100%; max-height: 100%; object-fit: cover; } ``` 以上就是关于使用CSS设置未知尺寸图片在...

    DIV+CSS 图片垂直居中效果

    在CSS中，通过设置`position`属性为`absolute`，然后调整`top`和`bottom`或`left`和`right`属性，可以实现图片的垂直居中。例如： ```css .container { position: relative; } .image { position: absolute; ...

    图片水平垂直居中

    首先，我们可以使用CSS的Flexbox布局来实现图片的水平垂直居中。Flexbox是一个强大的容器模型，它允许我们轻松地调整子元素的布局、对齐和分布，而无需复杂的定位技巧。 1. 创建一个包含图片的容器： ```html `...

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    css图片垂直居中

    其中，如何实现图片在容器中的垂直居中是一个常见的需求，尤其在响应式设计和现代网页布局中更为重要。本篇文章将深入探讨如何利用CSS实现图片的垂直居中效果。 首先，我们来看几种常见且实用的CSS方法： 1. **...

    css实现垂直居中

    以下是一些主要的CSS技术，它们可以帮助你实现"css实现垂直居中"： 1. **Flexbox布局** Flexbox是现代CSS布局模式，特别适合处理容器内子元素的对齐问题。要实现垂直居中，可以设置容器的`display`属性为`flex`，...

    css水平垂直居中

    本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直居中，并且无需指定具体的宽度和高度。 #### 步骤详解 1. **创建容器 div**： - 首先创建一个外层 div，为其分配一个自定义的 ID。 2. **嵌套内部 div**： ...

    js实现水平垂直居中

    本话题将深入探讨如何使用纯JavaScript实现水平垂直居中的方法。 一、固定宽高的元素居中 对于具有固定宽度和高度的元素，可以使用JavaScript动态设置元素的`margin`属性来实现居中。以下是一种简单的方法： ```...

    DIV水平垂直居中

    总之，实现`div`的水平垂直居中有多种方法，包括CSS的Flexbox、Grid、绝对定位等，以及JavaScript/jQuery的动态调整。选择哪种方法取决于项目需求和浏览器兼容性要求。在实际开发中，通常会结合使用这些技术来达到...

    div不定宽高的水平和垂直居中

    综上所述，针对“div不定宽高的水平和垂直居中”以及兼容IE67的需求，我们可以选择使用CSS传统方法（如绝对定位）或者结合JavaScript来实现。考虑到不同的浏览器兼容性和场景适应性，应根据实际项目需求来选择最合适...

    css实现垂直居中的方法

    这种方法通过将元素定位为绝对位置，并使用 `top`、`bottom`、`left` 和 `right` 的值为 `0`，然后设置 `margin: auto` 来实现水平和垂直居中。 ```css #content { position: absolute; top: 0; bottom: 0; left...

    [css]实现垂直居中水平居中的几种方式 - 霪霖笙箫 - 博客园1

    "CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...

    CSS实现垂直居中的5种方法.rar

    本教程将详细讲解5种有效的CSS方法，帮助你掌握垂直居中的技巧。 1. **Flexbox布局** Flexbox是现代CSS布局模型，特别适合处理容器内子元素的对齐问题。要实现垂直居中，首先设置容器的`display`属性为`flex`，...

    使用CSS实现盒子水平垂直居中的方法(8种)

    原始代码： ... &lt;!...&lt;... &lt;...meta name=viewport content=width=device-width, initial-scale=1.0&gt;...link rel=stylesheet href=center.css&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=son&gt;&lt;

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