美文网首页
垂直居中的所有方法

垂直居中的所有方法

作者: 安石0 | 来源:发表于2017-07-26 21:08 被阅读0次

要点1

不要写高度,.
.parent{
line-height:30px;
padding 15px 0;
}
要点2
搜索引擎
方法1
假设高度固定

table
tr
td
div
td
tr
table

方法2

div.parent
span span
div
div

span span
vertical:middle;display:inlinde;height:100%;
以上支持ie 5.5以上
方法3
绝对定位,child,top:50%;margin-top:负高度的一半
方法4(不支持ie8及以下)
child transform:tranlate(-50%,-50%)
不知道自己宽高也行
方法5
child
left:0
top:0
right:0
bottom:0
margin:auto
宽高指定
方法6
fleax垂直居中法
多个子元素
parent:display:flex
justify-content:center(水平居中)
align-items:center(垂直居中)

相关文章

  • CSS垂直居中

    #CSS垂直居中的所有方法 标签(空格分隔): css技巧 --- ##1.利用padding垂直居中(line-...

  • 常用的居中方法

    本文将介绍的居中方法有 ,水平居中,垂直居中和水平垂直居中。 一水平居中 二水平垂直居中

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 垂直居中的多种写法

    1、垂直居中 2、水平居中 3、垂直水平居中 方法1:使用绝对定位 方法二:使用display:flex 扩展1:...

  • 垂直居中的所有方法

    要点1 不要写高度,..parent{line-height:30px;padding 15px 0;}要点2搜索...

  • 用CSS实现元素居中的N种方法

    网页布局中,元素水平居中比垂直居中简单不少,同时实现水平垂直居中也不难,难的是想出多种实现水平垂直居中的方法并从中...

  • CSS解决盒模型居中的问题

    CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种:...

  • 2018-05-23

    div高度不固定,垂直居中的方法-汇总 1、高度宽度不固定,内容区域垂直居中

  • 水平居中与垂直居中

    水平居中和垂直居中可以说是在开发中经常遇到的问题,网上搜索水平居中和垂直居中的方法有很多,有的方法并不是很好,所以...

  • Css让div在屏幕上居中

    # 让div在屏幕上居中(水平居中+垂直居中)的方法总结 - html代码如下: - Css居中方法 (敲黑板)...

网友评论

      本文标题:垂直居中的所有方法

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