固定宽高的DIV绝对居中示例

简介: 看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数,绝对值为自身宽高的一半 当然,position也需要指定为absolute,或者relative.  如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性。

看了一些代码,然后自己试验了一番,分享如下示例:

实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数,绝对值为自身宽高的一半

当然,position也需要指定为absolute,或者relative. 

如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性。

如果有边框,那么,margin元素需要做一点微调。

代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title> 固定宽高的元素居中示例 </title>
  <style>
	.content{
		width: 400px;
		height: 300px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -200px;
		margin-top: -150px;
		background-color: #8888CC;
	}
  </style>
 </head>

 <body>
  <div class="content">
	<p>指定页面居中的元素</p>
  </div>
 </body>
</html>

原理就是这样,最近看到一篇文章,讲解的很明了:

http://www.webhek.com/vertical-align/

目录
相关文章
|
7月前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
58 0
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度 如图:   1.自动换行 111111111111111111111111 2.限制宽高度 11111111111111111111111111  (注意:如果div放在li中还需...
3872 0
|
1月前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
32 2
|
2月前
多个p标签,并让div“flex”布局,且单行溢出隐藏
多个p标签,并让div“flex”布局,且单行溢出隐藏
34 0
|
7月前
|
前端开发 容器
CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
该文本是关于CSS样式技巧的摘要:包括单行和多行文本超出时的省略显示方法,以及Flex布局的两端对齐和一行超出后多行居中的示例代码。
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
751 1
|
JavaScript
textarea 动态宽高(根据内容动态撑开宽高)
textarea 动态宽高(根据内容动态撑开宽高)
462 0
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
150 0
div高度自适应宽度按比例放大
导语:我们经常会碰到这样的需求:要求div高度跟随宽度变化而变化。在手机端,一张图片作为div的背景图,图片宽高比不一致,并要求div宽高比与图片宽高比一致;怎么实现这种需求呢? 原理 padding-top: 50%;用这个属性的百分比,padding-top的百分比是相对于父元素的宽度,比如:...
1749 0