父级宽高不确定,子集居中

<body>
    <div><div>
</body>

一:子集宽高确定
方法1

body{
    position:relative;
}
div {
    position:absolute; 
    width:200px; 
    height:200px; 
    top:50%; 
    left:50%; 
    margin-left:-100px; 
    margin-top: -100px;
    background: #1F487C;
  }

方法2

body{
    position:relative;
}
div{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
    margin: auto;
    width:20%;
    height:20%;
    background: #1F487C;
} 

二:子元素宽高不确定

body{
    position:relative;
}
div{
    position:absolute; 
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
} 

方法有很多,以后会慢慢填充新的方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,975评论 0 8
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,727评论 1 45
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 2,007评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,065评论 1 92
  • 春节期间,一个亲人因长期酗酒引起家庭矛盾,闹得是鸡飞狗跳。不喜喝酒的我很是疑惑,戒酒有这么难吗?读了美国“积极心理...
    张永胜_永往直前阅读 650评论 0 0

友情链接更多精彩内容