美文网首页
父级宽高不确定,子集居中

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

作者: 丁小孟 | 来源:发表于2018-11-08 18:55 被阅读0次
<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%);
} 

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

相关文章

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

    一:子集宽高确定方法1 方法2 二:子元素宽高不确定 方法有很多,以后会慢慢填充新的方法。

  • css关于居中的方式

    父元素没有固定宽高 水平垂直居中 html: css: 水平居中 不确定子元素宽高 设置水平居中,先将子元素转化为...

  • div内的div水平垂直居中方式

    第一种情况:不确定宽高 在父级元素用padding确定上下居中 在子级元素用margin确定左右居中 第二种情况:...

  • css实现水平垂直居中的几种方式

    以下:wp为父级,box 为子级 仅居中元素定宽高适用 absolute + 负margin absolute +...

  • 水平居中和垂直居中

    水平居中设置--行内元素 水平居中设置--定宽块级元素 水平居中设置--不定宽块状元素 垂直居中--父元素高度确定...

  • HTML+CSS \01

    1、如何实现不确定宽高的盒子上下左右居中 2、如何实现不确定宽高的图片上下左右居中 3、纯css写倒三角的原理:

  • css

    1、如何实现不确定宽高的盒子上下左右居中 2、如何实现不确定宽高的图片上下左右居中 3、纯css写倒三角的原理: ...

  • 浮动元素垂直居中的方法

    浮动元素垂直居中分父盒子有宽高和父盒子没有宽高两种情况。 父盒子有宽高 可以用下面两种方法来实现方法1: 方法2:...

  • 不定宽高的div盒子和不定宽高的盒子水平垂直居中

    让一个不定宽高的div,垂直水平居中的几种实现方式 不定宽高的div垂直居中的方式: 1、使用CSS方法: 父盒子...

  • css笔记-2/文字对齐文字省略

    核心知识 文档流(Normal Flow) 内联元素的宽高 块级元素的宽高 水平居中 垂直居中 文字溢出省略(多行...

网友评论

      本文标题:父级宽高不确定,子集居中

      本文链接:https://www.haomeiwen.com/subject/wnxgxqtx.html