<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. UML学习笔记1

    UML概述:是一种为面向对象软件设计提供的建模语言. 构成:事物things关系relationshs图diagrams UML事物:构件事物 行为事物 分组事物 注释事物 UML关系:依赖depen ...

  2. dij单源最短路纯模板

    #include <iostream> #include <cstdio> #include <cstdlib> #include <algorithm> ...

  3. SqlServer性能优化 手工性能收集动态管理视图（三）

    动态管理视图: 具体的实例语句:  --关于语句执行的基本情况 select * from sys.dm_exec_query_stats --动态管理函数  需要提供参数  select top 1 ...

  4. Linux上vi(vim)编辑器使用教程

    vi(vim)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim).vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率.vi是“visual interface”的缩 ...

  5. Spark 个人实战系列(1)--Spark 集群安装

    前言: CDH4不带yarn和spark, 因此需要自己搭建spark集群. 这边简单描述spark集群的安装过程, 并讲述spark的standalone模式, 以及对相关的脚本进行简单的分析. s ...

  6. 16年青岛网络赛 1002 Cure

    题目链接:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1002&cid=723 Cure Time Limit: 30 ...

  7. IncDec Sequence

    题目链接 http://www.lydsy.com/JudgeOnline/problem.php?id=3043[题目描述]给定一个长度为 n 的数列{a1,a2...an},每次可以选择一个区间[ ...

  8. AsyncTask 轻量级的异步类

    初步:http://www.cnblogs.com/devinzhang/archive/2012/02/13/2350070.html 详细:http://blog.csdn.net/liuhe68 ...

  9. .net中常用的几种页面间传递参数的方法

    转自:http://www.cnblogs.com/lxshanye/archive/2013/04/11/3014207.html 参考:http://www.cnblogs.com/zhangka ...

  10. centos中开机时如何自启动samba服务器

    解决办法如下:1.编辑rc.local文件#vi /etc/rc.d/rc.local2.加入如下启动命令/usr/sbin/apachectl start/etc/rc.d/init.d/mysql ...