绝对定位left:50% 隐式设置了宽度

不定宽高的盒子如何在父盒子中垂直居中，我们常做的一种方式便是

left: 50%;

top: 50%;

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

那这个盒子是否隐式添加了宽度吗？

测试

html

<body>

  <div class="container">

    <div class="box">

      <p>

        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

      </p>

    </div>

  </div>

</body>

css

body{

  margin: 0;

}

.container {

  height: 200px;

  position: relative;

  margin: 50px auto;

  border-top: 2px solid #333;

  border-bottom: 2px solid #333;

}

.box {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

}

页面样式

这种很合理，并没有出现上述的问题

惊喜出现了，当在句中加个空格

居然换行了，像是给了一个宽度似的，最后审查时，发现为960px(电脑是1920的屏，刚好一半) 网友

结论

  • 上述问题，确实是对的，但是有前提，若是连续没有空格的句子，是不会出现的，要出现两种方式

    • 句子中间添加空格
    • 给 当前元素添加 word-break: break-all,强行换行

  • 解决这类问题，便是不用这种方式进行居中形式，换另一种

      top: 0;
    
  left: 0;
    
  right: 0;
    
  bottom: 0

    如此便不会只有父元素的一半宽度了

绝对定位left:50% 隐式设置了宽度的更多相关文章

  1. Selenium2设置隐式等待和显示等待

    1. 设置显示等待 Java代码: public static WebElement WaitForElement(WebDriver driver, String locator) { WebEle ...

  2. 【ABAP系列】【第六篇】SAP ABAP7.50 之隐式增强

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列][第六篇]SAP ABAP7.5 ...

  3. jQ的隐式迭代和设置样式属性

    jQ中的隐式迭代 意义:不需要原生迭代了,在jQ内部自动帮你实现了循环 代码实现: let arr = document.querySelectorAll('li') for(let i = 0;i ...

  4. OC - 22.隐式动画

    简介 每个UI控件,默认自动创建一个图层(根图层),即每个UI控件对应于至少一个图层 每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层)   ...

  5. LINQ（隐式表达式、lambda 表达式）

    .NET 中一项突破性的创新是 LINQ(Language Integrated Query,语言集成查询),这组语言扩展让你能够不必离开舒适的 C# 语言执行查询. LINQ 定义了用于构建查询表达 ...

  6. 初步swift语言学习笔记2(可选类型？和隐式可选类型！)

    作者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/28904115 转载请注明出处 假设认为文章对你有所帮助.请通过留言 ...

  7. [iOS Animation]-CALayer 隐式动画

    隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画是Core Animation库一个非常显著的 ...

  8. 八数码问题+路径寻找问题+bfs(隐式图的判重操作)

    Δ路径寻找问题可以归结为隐式图的遍历,它的任务是找到一条凑够初始状态到终止问题的最优路径, 而不是像回溯法那样找到一个符合某些要求的解. 八数码问题就是路径查找问题背景下的经典训练题目. 程序框架 p ...

  9. iOS动画学习 -隐式动画

    事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.你并不需要在Core Animation中手动打开动画,但是你需要明确地关闭它,否则它会一直存在. 当你改变 ...

随机推荐

  1. SQL 使用分区方法

  2. Html5大文件断点续传实现方法

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  3. [luogu]P2657低头一族[树状数组]

    [luogu]P2657 低头一族 题目描述 一群青年人排成一队,用手机互相聊天. 每个人的手机有一个信号接收指标,第i个人的接收指标设为v[i]. 如果位置在x[i]的人要和位置在xj的人聊天,那么 ...

  4. 花式求LCA

    设树上有两点x.y,要求他们的lca(最近公共祖先) 1.倍增求LCA: 先预处理出树上每个点的向上2^k的祖先. 再看x.y:先把深度深的倍增跳到和深度浅的一样的深度,判断是否在同一点:是,该点即为 ...

  5. [BZOJ3456]城市规划：DP+NTT+多项式求逆

    写在前面的话 昨天听吕老板讲课,数数题感觉十分的神仙. 于是,ErkkiErkko这个小蒟蒻也要去学数数题了. 分析 Miskcoo orz 带标号无向连通图计数. \(f(x)\)表示\(x\)个点 ...

  6. 1.Python编程基础

    1. 其实,程序指的就是一系列指令,用来告诉计算机做什么,而编写程序的关键在于,我们需要用计算机可以理解的语言来提供这些指令. 虽然借助 Siri(Apple).Google Now(Android) ...

  7. 源码阅读-Kingfisher

    最后更新:2018-01-16 使用教程: 官方的链接 使用 Kingfisher 处理网络图片的读取与缓存 1. 开始使用 桥接 KingFisher, 利用 KingfisherCompatibl ...

  8. vim编辑器快捷键

    光标控制命令 命令 光标移动 h或^h 向左移一个字符 j或^j或^n 向下移一行 k或^p 向上移一行 l或空格 向右移一个字符 G 移到文件的最后一行 nG 移到文件的第n行 w 移到下一个字的开 ...

  9. 从头开始学习Vuex

    一.前言 当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态.以前的解决办法: a.将数据以及操作数据的行为都定义在父组件; b.将数据以及操作数 ...

  10. SVN appears to be part of a Subversion 问题心得

    昨天更新了下项目,但同时又增加了一个Java工程,我就在本地单独导出到workspace同目录下:结果第二天提交代码的时候,提示如下错误 svn: E155021: The path 'xxx' ap ...