Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

translate的百分比是基于元素自身

  之前要实现对不定尺寸元素的居中可能要嵌套好几层,因为通常百分比都是以容器尺寸来计算的,甚至垂直的margin、padding,以容器宽度来计算。这使得对元素的垂直居中变得有些麻烦了。既然translate是基于元素自身的尺寸计算的,为何不用它实现呢?
  下面是实例,只需要一个元素即可实现,后面的SCRIPT是演示用的,和居中效果无关。
<style>
#box {
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid #CCC;
  padding:6px 8px;
  margin-right:-100%;
  font:14px/1.618 微软雅黑;
}
</style>
<span id="box"></span>
<script>
//请不要在意这段代码,只是用于演示这个程序的
var data="\
  我是个 <b>不<b>定<b>尺<b>寸<b>元<b>素<br/>\
  也有人叫我 <b>自<b>适<b>应<b>元<b>素<br/>\
  乃们爱叫什么叫什么,反正我只 <b>居<b>中,不说话<br/>\
  萌萌哒  ○(* ̄▽ ̄*)○\
",r=/[\u4E00-\u9FA5]|<(.*?)>.|\s|[^\u4E00-\u9FA5]+/g;
(function callee(){
  var matches=r.exec(data);
  if(!matches)return;
  box.insertAdjacentHTML("beforeend",matches[0]);
  setTimeout(callee,matches[1]?300:150);
})();
</script>
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^