<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. UVA 10173 (几何凸包)

    判断矩形能包围点集的最小面积:凸包 #include <iostream> #include <cmath> #include <cstdio> #include ...

  2. Myeclipse+Axis2+Tomcat开发webService

    1.  下载文件: 需要在axis2官网下载两种类型的axis2文件,bin版和war版(下载地址:http://axis.apache.org/axis2/java/core/download.cg ...

  3. iar 错误解决

    使用原来备份的项目可以正确烧写并进入调试状态,但使用新项目则报错,错误提示为Failed to load debugee: E:\工作\项目-农业\KaCES-F\Debug\Exe\kaces.tx ...

  4. redis-persist上线

    九月份惨不忍睹,因为代码质量不够高,直接被Boss喷成了筛子.被反复教育说要高质量的代码,要可维护.高性能…… 幸而,最后一周终于在紧张的加班中,灰度上线redis-land-go了,项目也改名为re ...

  5. 在 Mac OS X Yosemite 10.10.5 上配置 OpenGL 编程环境

    这个教程主要参考了youtube上的视频 Getting Started in OpenGL with GLFW/GLEW in Xcode 6 ,这个视频有点问题,不能照搬.本人通过自己摸(瞎)索( ...

  6. PHP面向对象(分页)

    <?php   class page   {      var $table;      var $pagesize;      var $totalsize;      var $totalp ...

  7. LeetCode-Group Anagrams

    Given an array of strings, group anagrams together. For example, given: ["eat", "tea& ...

  8. [BZOJ 3209]花神的数论题

    一道简单的数位 dp 题 但是脑子里只有 __builtin_popcountll 了呢(自重) 看完题解后很快就理解了,而且有一种这么简单的题居然没想到做法真是不应该唉~的感觉 用 f[i] 表示 ...

  9. 一些上流的CSS3图片样式

    直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...

  10. ls

    -a, –all 列出目录下的所有文件,包括以 . 开头的隐含文件 -h, –human-readable 以容易理解的格式列出文件大小 (例如 1K 234M 2G) -l 除了文件名之外,还将文件 ...