css-垂直居中

- 居中vs不居中

代码

- 绝对定位实现居中

代码

高度,宽度不固定的话无法使用该方法,css3可在该需要居中的div里加上transform:translate(-50%,-50%)

- 使用vertical-align实现居中

代码
vertical-align: middle:作用在行内元素和表格,进行基线对齐

- table-cell实现居中

代码

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • css垂直居中
    垂直居中有几种实现方式 父元素上下padding设置成一样大小代码2.绝对定位position: absolute...
    饥人谷_wanpp阅读 631评论 0赞 47
  • CSS垂直居中方法集
    使用绝对定位和负外边距对块级元素进行垂直居中 html代码： css代码： 运行结果如下： 这个方法兼容性不错，但...
    深沉的简单阅读 277评论 0赞 2
  • CSS垂直居中和水平居中
    前言 CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂...
    秦至阅读 746评论 1赞 2
  • css 垂直居中的方法
    标签：css-常用技巧 table-cell 式将 center 元素的父容器设置为 display:table,...
    练晓习阅读 540评论 0赞 1
  • CSS垂直居中的6种方法
    垂直居中一直是CSS布局中比较令人头疼的问题，相比于水平居中，垂直居中对于不同的元素类型需要采取截然不同的策略，因...
    文风Yu阅读 55,711评论 2赞 8