美文网首页
宽高不确定,垂直居中

宽高不确定,垂直居中

作者: 泪滴在琴上 | 来源:发表于2018-11-21 23:22 被阅读3次
>div {
                    width: 60%;
                    height: 0; // 设置高为0,让padding撑起高
                    padding-bottom: 60%; /* 让div的高等于宽 */
                    border-radius: 50%;
                    color: white;
                    margin: 20px auto;
                    position: relative;
                    i{
                        font-size: 60px;
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform:translate(-50%,-50%);
                        text-align: center;
                    }
}

相关文章

  • css关于居中的方式

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

  • 1-css的多种垂直居中的方法

    多种css垂直居中的方法 ==css3不定宽高水平垂直居中== 1:固定高宽的垂直居中 如上图,固定高宽的很简单,...

  • 宽高不确定,垂直居中

  • div不定宽高实现垂直居中布局

    在开发中经常会遇到让某个元素垂直居中,但宽度并不确定。下面就总结一下,哪些方法可以实现不定宽高,水平垂直居中。 不...

  • 垂直居中

    垂直居中 .parent > .child .parent 定高 .child 高度不确定,垂直居中 要点1 不要...

  • 垂直居中的七种方法

    垂直居中 .parent > .child .parent 定高 .child 高度不确定,垂直居中 要点1 不要...

  • 未知高度垂直水平居中

    未知宽高的弹出框,水平垂直居中 parrent 内的元素水平垂直居中 parrent 内的元素垂直居中

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • css之水平垂直居中

    不定宽高的水平垂直居中---transform

  • css---各种居中垂直详解

    项目中经常会有各种居中的布局,什么垂直居中,水平居中,垂直水平居中,已知宽高和未知宽高居中,那么接下来就整体的总结...

网友评论

      本文标题:宽高不确定,垂直居中

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