<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. 如何取消win10电脑自动更新

    windows 10系统中关闭windows自动更新步骤如下:1.按键盘上的“Windows徽标键+R”组合键,可以调出“运行”窗口. 2.输入gpedit.msc,单击“确定”,可以打开“本地组策略 ...

  2. activity 和 生命周期 ：流程

    activity是android的一个基本的组件.讨论生命周期,taskstack等等的话题的时候.就不得不去看一下android framework层的源码了. 生命周期,实际就是系统调用andro ...

  3. C++中的复制构造函数

    与C++中的构造函数相同,复制构造函数在对象生成过程中同样进行插入对应的Vtable虚表,但在成员变量赋值时,除具有复制构造函数的成员对象外,编译器合成复制构造函数其余均采用”Bitwise copy ...

  4. Python Scarpy安装包

    由于网络的原因,Scraoy无法安装 Cannot fetch index base URL https://pypi.python.org/simple/ 1.  scrapy 安装所需要的包可以从 ...

  5. pip install 出现报asciii码错误的问题

    原因是pip安装python包会加载我的用户目录,我的用户目录恰好是中文的,ascii不能编码. 解决办法是: python目录 Python27\Lib\site-packages 建一个文件sit ...

  6. [dijkstra+heap优化] 模板

    var n,m,s,i,j,x,y,z,l,tot :longint; pre,last,other,len :..] of longint; heap,d,pl :Array[..] of long ...

  7. Java使用Jdbc操作MySql数据库(一)

    这个示例是Java操作MySql的基本方法. 在这个示例之前,要安装好MySql,并且配置好账户密码,创建一个logininfo数据库,在数据库中创建userinfo数据表.并且在表中添加示例数据. ...

  8. CentOS 7 安装 Oracle 11g

    新到的云主机环境,系统是CentOS 7 x86_64,需要安装上安装Oracle11.2g.摸索很长时间,终于折腾搞定了. 下载 Oracle 下载地址:Oracle 11.2.0.2 (因为不是已 ...

  9. PHP如何批量生成手机号-使用PHP 如何生成一组不重复的手机号码？

    <?php //匹配手机号的正则表达式 #^(13[0-9]|14[47]|15[0-35-9]|17[6-8]|18[0-9])([0-9]{8})$# $arr = array( 130,1 ...

  10. linux项目-之系统安装部署-cobbler

    http://cobbler.github.io/manuals/2.6.0/1/1_-_Release_Notes.html http://www.osyunwei.com/archives/760 ...