<style>

.container{width:400px; height:400px; position:relative;}

.center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto;

         width:50px; height:50px;  //宽高可以不写

}

</style>

<div class="container">

  <div class="center"></center>

</div>

父元素高度已知，子元素宽高未知，  水平垂直居中很好用

CSS子元素居中(父元素宽高已知，子元素未知)的更多相关文章

  1. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. css 宽高自适应的div 元素 如何居中 垂直居中

    在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...

  3. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  4. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  5. css多种方法实现已知宽度和未知宽度的元素水平垂直居中

    // html <div class="box-wrapper"> <div class="box"> 内部box <p>更 ...

  6. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  7. CSS实现宽度自适应100%，宽高16:9的比例的矩形

    现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...

  8. CSS 中区块的使用_宽高属性

    width 像素/百分比 区块的宽度 auto height 像素/百分比 区块的高度 auto min-height 像素像素/百分比 区块最小高度 auto max-height 像素像素/百分比 ...

  9. CSS实现宽度自适应100%，宽高16:9的比例的圖片或者矩形

    前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...

随机推荐

  1. USACO 08-Nov（ 最小生成树）

    美国人出题拐弯抹角,倒是挺尊重动物的 10206301 2 52 3 52 4 123 4 172 5 153 5 64 5 12 Hint从牧场4起床, 然后按照 4, 5, 4, 2, 3, 2, ...

  2. [转]-Lua协程的实现

    协程是个很好的东西,它能做的事情与线程相似,区别在于:协程是使用者可控的,有API给使用者来暂停和继续执行,而线程由操作系统内核控制:另 外,协程也更加轻量级.这样,在遇到某些可能阻塞的操作时,可以使 ...

  3. 避免每次输入bundler Exec命令

    bundle在ruby的世界里是个好东西,它可以用来管理应用程序的依赖库.它能自动的下载和安装指定的gem,也可以随时更新指定的gem. rvm则是一个命令行工具,能帮助你轻松的安装,管理多个ruby ...

  4. Ubuntn系统忘记密码的解决方法（虚拟机下同样处理）

    不知道你有没有遇到过忘记了ubuntn系统密码的情况,反正我都了,一段时间没用就很容易忘记密码的,此时无奈只能修改密码了!下面分享一个简单实用的方法: 版本号为: (我用的是V-BOX虚拟机安装的ub ...

  5. ZFIR054-现金流量表

    *********************************************************************** * Title : ZFIR102 * * Applic ...

  6. UVA 572

    这是一道纯正的深度优先搜索题目. 题目要求在有多少个不同的块,而不同块的定义则是,一个块中的任意一点和l另一个块中的任意一点不会相连,而相连的定义则是 在横向.纵向和对角线上相连. #include& ...

  7. 龙威零式_团队项目例会记录_18 (Beta架构讨论)

    例会照片 任务更新 姓名 今日完成任务 实际花费时间 明日任务 预计花费时间 谢振威 继续构思beta版本架构并且输出文档 2h #40数据库模块接口定义 2h 杨金键 继续构思beta版本架构并且输 ...

  8. POJ 3067 Japan（树状数组）

                                                                                  Japan   Time Limit: 10 ...

  9. java端口扫描（原创）

    项目需要扫描占用的端口来判断服务是否启动,通过查资料发现大多数方法都是ServerSocket socket = new ServerSocket(port);代码如下: package com.fr ...

  10. [NOIP2011] mayan游戏（搜索+剪枝）

    题目描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定 ...