<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. ubuntu 14.04 安装docker

    常会遇到的问题就是网络的问题,如访问https://get.docker.io/ 遇到403的问题:总结一下最简单的几条命令: $ sudo apt-get install apt-transport ...

  2. json全套

    JS文件 function pager1_InitData() { //基础配置 $("#pager1").myPagination({ currPage: 1, pageCoun ...

  3. C++虚函数的实现机制示例

    C++虚函数的实现机制是通过一个vtable表,指向子类的虚函数地址. 另外,如果不是虚函数,则不能实现用父类引用调用子类方法. #include <windows.h> #include ...

  4. C++ Primer----智能指针类 2

    指针带给了 C++巨大的灵活性,然而同样也带来无数的问题,悬挂指针,内存泄漏等. int *pInt = new int(1); // Do not forget delete pInt; 智能指针就 ...

  5. Windows下利用py2exe生成静默运行的命令行程序

    py2exe是python的第三方库,可以利用它将你的python脚本编译成可执行文件(exe),而在实际的开发过程中生成的dos窗口很影响用户体验,建议按以下方式让exe静默运行. 首先将你的pyt ...

  6. C++学习笔记16：Linux系统编程基础1

    参数列表 Linux命令行规范 短参数:以单横开头,后跟单一字符,例如:ls -h 长参数:以双横开头,后跟字符串,例如:ls --help 程序访问参数列表的方法: 主函数的参数argc和argv ...

  7. ubuntu 常用命令

    此处为使用ubuntu中常用的命令,不会全面深入讲解命令,仅供日常使用查看,以备遗忘. 不定时更新! 1.远程传输文件(小文件) scp [user@源文件地址:/目录/.../file] [目的地址 ...

  8. Android 开发错误信息001

    Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessExceptio ...

  9. VSCode用户设置

    // 将设置放入此文件中以覆盖默认设置 { //-------- 搜索配置 -------- "search.exclude": { "**/node_modules&q ...

  10. [solr] - spell check

    solr提供了一个spell check,又叫suggestions,可以用于查询输入的自动完成功能auto-complete. 参考文献: https://cwiki.apache.org/conf ...