<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. uoot启动过程

    1.从我们的start_armboot开始讲起 u-boot整体由汇编段和C语言段外加连接脚本组成.关于汇编段请看我之前的博客<u-boot源码汇编段简要分析>,好,让我们进入start_ ...

  2. SAP web 开发 (第二篇 bsp 开发 mvc模式 Part1 )

    Model-View-Controller 简称MVC. 简单的说就是把数据处理,显示,页面事件及处理过程分离开来,企业应用多数都采用这种方式,多层架构的优缺点不再多言,google一下啥都知道. 在 ...

  3. 详解Android功耗分析工具Power Tutor的使用

    简介: PowerTutor 是由美国密歇根大学在谷歌的指导下开发的.它是用来展示google智能手机中主要组件或应用功耗的一种应用程序.例如,CPU,网络链接,LCD显示屏,GPS等.它允许开发者很 ...

  4. jquery模板制作左侧导航组件

    /** * Created by bmk on 16-4-25. * * 用法:在自己的js里面把左侧导航的相关图标和对应的列表项名称如下编写: * 版本更新日至按需添加 * 在js中的RNA.run ...

  5. 【NOIP2012】借教室

    因为本校OJ+1s所以用线段树水过了,不去syz的水库水这题还真不知道线段树过不了= = 原题: 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要 向学校申请借教室.教室的 ...

  6. JavaBean基本用法示例(二)

    JavaBean的第二种用法,是接收form组件的请求赋值. 一.修改person类.因为这一次是两个网页之间的数据传输,受中文乱码问题的影响,所以在person类中添加一个用于转码的函数,并且在每一 ...

  7. Nginx-uri、request_uri、document_uri之间的区别

    在nginx中有几个关于uri的变量,包括$uri.$request_uri.$document_uri,下面看一下他们的区别 :$request_uri: /stat.php?id=1585378& ...

  8. 在C#中使用C++编写的类

    现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...

  9. 动态加载、移除、替换JS和CSS

    //动态加载一个js/css文件 function loadjscssfile(filename, filetype) { if (filetype == "js") { var ...

  10. 【转】maven核心，pom.xml详解

    感谢如下博主: http://www.cnblogs.com/qq78292959/p/3711501.html maven核心,pom.xml详解 什么是pom?    pom作为项目对象模型.通过 ...