记一个前端居中的坑

css使用

top: 50%;

left: 50%;

transform: translate(-50%, -50%)

居中时,如果该居中元素的高使用百分比

其的后代元素中有使用

position: absolute;

则向回偏移时计算不到该元素高度,从而不能居中,水平方向应该也是这样

(其实后代position为absolute时,就算居中元素设为固定高度居中也会发生变化,在手机和电脑上会有不同的显示)

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,824评论 1 45
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,513评论 0 5
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,644评论 0 6
  • 高效率慢生活践行第 94天 今天是什么日子: 2018.7.24 周二 起床5:10 就寝:11...
    冉冉竹阅读 266评论 0 1