伊亚镇,圣托里尼岛,希腊 (© f9photos/Getty Images)

Welcom to 评论 - lizhenqiu blog!

    #590

    作者:广西河池市宜州市
    鼠标点击文字冒泡动画特效果
    (function() {var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('click', function(e) {if (e.target.tagName == 'A') {return;}var x = e.pageX, y = e.pageY, span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top - i + 'px';el.style.opacity = (180 - i) / 180;}}}}());
    Run code
    Cut to clipboard
      #,广西河池市宜州市,2018-02-24,15:53:08, dz论坛返回顶部的代码
      _attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();
      Run code
      Cut to clipboard
        #,广西河池市宜州市,2018-02-24,16:34:45,
        discuz论坛左边栏头像信息滚动自动固定js
        function ctrlLeftInfo(sli_staticnum) { var sli = $('scrollleftinfo'); var postlist_bottom = parseInt($('postlist').getBoundingClientRect().bottom); var sli_bottom = parseInt(sli.getBoundingClientRect().bottom); if (postlist_bottom < sli_staticnum && postlist_bottom != sli_bottom) { sli.style.top = (postlist_bottom - sli.offsetHeight - 5) + 'px'; } else { sli.style.top = 'auto'; } } function fixed_avatar(pids, fixednv) { var fixedtopnv = fixednv ? new fixed_top_nv('nv', true) : false; if (fixednv) { fixedtopnv.init(); } function fixedavatar(e) { var avatartop = fixednv ? fixedtopnv.run() : 0; for (var i = 0; i < pids.length; i++) { var pid = pids[i]; var posttable = $('pid' + pid); var postavatar = $('favatar' + pid); if (!$('favatar' + pid)) { return; } var nextpost = $('_postposition' + pid); if (!postavatar || !nextpost || posttable.offsetHeight - 100 < postavatar.offsetHeight) { if (postavatar.style.position == 'fixed') { postavatar.style.position = ''; } continue; } var avatarstyle = postavatar.style; posttabletop = parseInt(posttable.getBoundingClientRect().top); nextposttop = parseInt(nextpost.getBoundingClientRect().top); if (nextposttop > 0 && nextposttop <= postavatar.offsetHeight) { if (BROWSER.firefox) { if (avatarstyle.position != 'fixed') { avatarstyle.position = 'fixed'; } avatarstyle.top = -(postavatar.offsetHeight - nextposttop) + 'px'; } else { postavatar.parentNode.style.position = 'relative'; avatarstyle.top = ''; avatarstyle.bottom = '0px'; avatarstyle.position = 'absolute'; } } else if (posttabletop < 0 && nextposttop > 0) { if (postavatar.parentNode.style.position != '') { postavatar.parentNode.style.position = ''; } if (avatarstyle.position != 'fixed' || parseInt(avatarstyle.top) != avatartop) { avatarstyle.bottom = ''; avatarstyle.top = avatartop + 'px'; avatarstyle.position = 'fixed'; } } else if (avatarstyle.position != '') { avatarstyle.position = ''; } } } if (!(BROWSER.ie && BROWSER.ie < 7)) { _attachEvent(window, 'load', function () { _attachEvent(window, 'scroll', fixedavatar); }); } }
        Run code
        Cut to clipboard
          #,广西河池市宜州市,2018-03-05,16:47:35,
          手机端无效解决办法
          (function() {var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('<?php if($Applessss){ echo 'touchstart'; }else echo 'click'; ?>', function(e) {if (e.target.tagName == 'A') {return;} <?php if($Applessss){ echo 'var x=e.targetTouches[0].pageX,y=e.targetTouches[0].pageY'; }else echo 'var x = e.pageX, y = e.pageY;'; ?>; var span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top - i + 'px';el.style.opacity = (180 - i) / 180;}}}}());
          Run code
          Cut to clipboard
            #,广西河池市宜州市,2018-03-05,16:48:44, 手机e.pageX和e.pageY无效的原因
            手机端拖拽事件: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend事件:当手指从屏幕上离开的时候触发。 touchcancel事件:当系统停止跟踪触摸的时候触发。 调用方法: (1)jquery方法:$(document).bind("touchend", function(e){}); (2)javascript方法:document.addEventListener("touchend",function(e){}); 手机端获取pageX和pageY: touchstart事件下获取:e.originalEvent.targetTouches[0].pageX。 touchmove事件下获取:e.originalEvent.targetTouches[0].pageX。 touchend事件的下获取:e.originalEvent.changedTouches[0].pageX 。 每个Touch对象包含的属性如下。 clientX:触摸目标在视口中的x坐标。 clientY:触摸目标在视口中的y坐标。 identifier:标识触摸的唯一ID。 pageX:触摸目标在页面中的x坐标。 pageY:触摸目标在页面中的y坐标。 screenX:触摸目标在屏幕中的x坐标。 screenY:触摸目标在屏幕中的y坐标。 target:触目的DOM节点目标。
            Run code
            Cut to clipboard
              #,广西河池市宜州市,2018-03-05,16:50:08, touch事件中的touches、targetTouches和changedTouches详解
              touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性: 1. 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。 2. 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时, targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值, 为第二个手指的触摸点,因为第二个手指是引发事件的原因 3. 用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值 4. 手指滑动时,三个值都会发生变化 5. 一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。 6. 手指都离开屏幕之后,touches和targetTouches中将不会再有值,changedTouches还会有一个值, 此值为最后一个离开屏幕的手指的接触点。 2. 触点坐标选取 touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX 3.touchmove事件对象的获取 想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为使用arguments[0]获取event参数 touchmove:function(e,参数一){   var e=arguments[0]   e.preventDefault() }
              Run code
              Cut to clipboard
                #,广西河池市宜州市,2018-03-05,16:53:06, 巧用cssText属性批量操作样式
                使用cssText时应该采用叠加的方式以保留原有的样式
                function setStyle(el, strCss){ var sty = el.style; sty.cssText = sty.cssText + strCss; }
                Run code
                Cut to clipboard

                  使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题,但由于 IE6/7/8中cssText返回值少了分号 会让你失望。
                  因此对IE6/7/8还需单独处理下,如果cssText返回值没";"则补上
                  function setStyle(el, strCss){ function endsWith(str, suffix) { var l = str.length - suffix.length; return l >= 0 && str.indexOf(suffix, l) == l; } var sty = el.style, cssText = sty.cssText; if(!endsWith(cssText, ';')){ cssText += ';'; } sty.cssText = cssText + strCss; }
                  Run code
                  Cut to clipboard
                    #,广西河池市宜州市,2018-03-05,16:55:07,
                    cssText
                    js pageX手机无效
                    js join
                    <script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join(".")) //输出: //George.John.Thomas </script>
                    Run code
                    Cut to clipboard

                      join() 方法用于把数组中的所有元素放入一个字符串
                      如果省略该参数,则使用逗号作为分隔符。
                      文章:常用html、demo代码  发表时间:2018-02-24, 15:51:49  
                      展开↯

                      #591

                      作者:广西南宁市
                      古代有一小姐,遇到一个上京赶考的穷书生避雨,发现其很有才华后以身相许。

                      次日小姐垂泪送书生:“君若高中莫负妾身。”

                      书生发誓后,带着姑娘给的银子走了。

                      小姐让丫环把书生的名字纪录在册,丫头说:“这已经是第五十个书生了!”

                      小姐说:“没办法,总有一个会真的考上的”。

                      ——2017最佳小说《风投》

                      书生让书童把小姐的名字记下,感叹说:这是第一百个了啊。

                      ——2017最佳小说《融资》

                      书生的伴读童子问书生:公子,自从三年前你离家,如今已经睡了九十余名女子了,我们在各大赴京路上往复,难道就不去赶考了吗?书生答:赶考当大官不也是为了钱和女人吗?既得痴情女子九十有余,还赶着考啥?

                      ——2017最佳小说《泡沫》

                      丫环帮小姐把名字记下后,从贴身处掏出一个小本,记下了第五十个书童的名字!

                      一一2017最佳小说《跟投》
                      文章:成功的故事只能倒叙着讲  发表时间:2018-03-05, 05:32:48  
                      展开↯

                      #592

                      作者:Administrator
                      <a href="tel:400-888-6633">拨打电话<a> <a href="sms:19956321564">发送短信<a> <a href="mailto:mail@mail.com">发送邮件<a>
                      Run code
                      Cut to clipboard
                        #,广西河池市宜州市,2018-03-03,15:55:32,
                        IE edge浏览器强制修改了电话样式,办法解决
                        <meta content="telephone=no" name="format-detection">
                        Run code
                        Cut to clipboard

                          加个meta标签就可以
                          去掉Egde浏览器 对电话号码的默认样式
                          win10 edge 关闭电话号码识别
                          Microsoft Edge 浏览器会把某些IP地址强制识别为电话号码
                          文章:常用html、demo代码  发表时间:2017-10-19, 17:10:43  
                          展开↯

                          #593

                          作者:广西河池市宜州市
                          CSS3实现图片循环旋转
                          @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .Rotation{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; }
                          Run code
                          Cut to clipboard
                            文章:常用html、demo代码  发表时间:2018-03-03, 11:51:59  
                            展开↯

                            #594

                            作者:广西河池市宜州市
                            Chrome 谷歌浏览器 清除 DNS 缓存 ;遇见有时候本应该打开的网页无法打开时使用
                            打开 Chrome 浏览器,在输入网址的地方输入
                            chrome://net-internals/#dns
                            Run code
                            Cut to clipboard

                              然后点击红色条右上角的下拉按键,点击 Clear cache 和 Flush sockets 两项即可清除
                              文章:程序员编程常用网页工具集[游戏]  发表时间:2018-03-03, 10:12:01  
                              展开↯

                              #595

                              作者:广西河池市宜州市
                              7 阶层叠水平(stacking level)
                              #,广西河池市宜州市,2018-03-03,10:06:16, 3D 动画硬件加速
                              .item { transform: translateZ(0); /* 或者 will-change: transform; */ }
                              Run code
                              Cut to clipboard

                                用CSS开启硬件加速来提高网站性能
                                文章:常用html、demo代码  发表时间:2018-03-03, 10:04:51  
                                展开↯

                                #596

                                作者:广西河池市宜州市
                                富二代明白,再穷些就一定找不到
                                #,广西河池市宜州市,2018-03-02,11:14:40,
                                一个渔夫抓到一只美人鱼,然后就把她放了,他的朋友问他
                                why
                                他说
                                how
                                #,广西河池市宜州市,2018-03-02,16:07:05, 你根本不在乎意大利面还够不够,也不在乎40米大刀抽出来再放回去有多难,更不在乎橘子树结果子要多久,你只在乎你自己。
                                #,广西河池市宜州市,2018-03-03,09:52:29,
                                文章:给未来年轻创业者们  发表时间:2018-03-02, 09:59:34  
                                展开↯

                                #597

                                作者:广西河池市宜州市
                                乌鸦、小火车、树为主角的故事


                                文章:给未来年轻创业者们  发表时间:2018-03-02, 18:05:09  
                                展开↯

                                #598

                                作者:广西河池市宜州市
                                使用JS判断用户操作系统是否安装某字体
                                <script>var isSupportFontFamily=function(f){if(typeof f!="string"){return false}var h="Arial";if(f.toLowerCase()==h.toLowerCase()){return true}var e="a";var d=100;var a=100,i=100;var c=document.createElement("canvas");var b=c.getContext("2d");c.width=a;c.height=i;b.textAlign="center";b.fillStyle="black";b.textBaseline="middle";var g=function(j){b.clearRect(0,0,a,i);b.font=d+"px "+j+", "+h;b.fillText(e,a/2,i/2);var k=b.getImageData(0,0,a,i).data;return[].slice.call(k).filter(function(l){return l!=0})};return g(h).join("")!==g(f).join("")}; // isSupportMicrosoftYahei为true或者false var isSupportMicrosoftYahei = isSupportFontFamily('Microsoft Yahei'); alert(isSupportMicrosoftYahei); </script>
                                Run code
                                Cut to clipboard

                                  其中fontFamily参数是必须的,为CSS中font-family设置的web可识别的字体名称,例如宋体'simsun',微软雅黑'Microsoft Yahei'等
                                  如果用户的操作系统安装了微软雅黑,则isSupportMicrosoftYahei为true,否则为false。

                                  由于本检测方法本质上是基于web检测,因此,fontFamily参数必须是web可识别的,因此,很多中文字体需要使用其英文名称如“思源黑体”, “兰亭黑体”等

                                  原文:小tips: 使用JS检测用户是否安装某font-family字体
                                  文章:常用html、demo代码  发表时间:2018-03-02, 17:36:31  
                                  展开↯

                                  #599

                                  作者:广西河池市宜州市
                                  js bind 传递参数
                                  Jquery之Bind方法参数传递与接收的三种方法
                                  方法一、
                                  function GetCode(event) { alert(event.data.foo); } $(document).ready(function() { $("#summary").bind("click", {foo:'abc'} ,GetCode); });
                                  Run code
                                  Cut to clipboard


                                    方法二、
                                    函数句柄
                                    $("#summary").bind("click", function() { GetCode("abc") }); function GetCode(str) { }
                                    Run code
                                    Cut to clipboard


                                      方法三、
                                      函数闭包
                                      function GetCode(str) { return function() { alert(str) }} $("#summary").bind("click", GetCode("abc"));
                                      Run code
                                      Cut to clipboard
                                        #,广西河池市宜州市,2018-03-02,17:22:06,
                                        <script type="text/javascript"> $(document).ready(function(){ $("button").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} }); }); </script>
                                        Run code
                                        Cut to clipboard
                                          #,广西河池市宜州市,2018-03-02,17:22:35,
                                          $(selector).bind(event,data,function)
                                          Run code
                                          Cut to clipboard
                                            $(selector).bind({event:function, event:function, ...})
                                            Run code
                                            Cut to clipboard
                                              文章:常用html、demo代码  发表时间:2018-03-02, 17:20:54  
                                              展开↯

                                              #600

                                              作者:广西河池市宜州市
                                              仿造张鑫旭-鑫空间-鑫生活博客回到相关文章按钮动画效果
                                              <style> #back{line-height:40px;position:absolute;right:20px;padding: 0 10px 0 13px;background-color: #000;animation:tada 1s 1s;color: #cd0000;font-size:12px;} @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } </style> <a href="http://www.zhangxinxu.com/" id="back" style="">回到相关文章 »</a> <script> var BAK = document.getElementById('back'); if (BAK){setInterval(function () {BAK.style.animation='none';BAK.offsetHeight;BAK.style.animation='';}, 3000);} </script>
                                              Run code
                                              Cut to clipboard
                                                文章:常用html、demo代码  发表时间:2018-03-02, 16:54:12  
                                                展开↯

                                                #601

                                                作者:广西河池市宜州市
                                                标记语句之前用过,san.js里解析模板的时候也有用到
                                                文章:JS特性  发表时间:2018-03-02, 16:43:57  
                                                展开↯

                                                #602

                                                作者:广西河池市宜州市
                                                逗号运算符和reduce()相结合,简直不能太棒
                                                文章:JS特性  发表时间:2018-03-02, 16:43:30  
                                                展开↯

                                                #603

                                                作者:广西河池市宜州市
                                                display: flex; 的兼容问题解决办法
                                                .cardBagMxList { height: 1.2rem; display: -webkit-flex; display: flex; /* for uc */ display: -webkit-box; display: -ms-flexbox; /* TWEENER - IE 10 */ } .cardBagMxList div { text-align: center; color: #888888; font-size: 0.24rem; padding-top: 0.25rem; -ms-flex: 1; /* IE 10 */ -webkit-flex: 1; flex: 1; /* for uc */ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; }
                                                Run code
                                                Cut to clipboard
                                                  文章:常用html、demo代码  发表时间:2018-03-02, 16:02:44  
                                                  展开↯

                                                  #604

                                                  作者:广西河池市宜州市
                                                  文章:@意见反馈/技术支持/伊网/安企网  发表时间:2018-03-02, 12:06:16  
                                                  展开↯

                                                  #605

                                                  作者:广西河池市宜州市
                                                  更多评论图标
                                                  文章:常用html、demo代码  发表时间:2018-03-02, 09:25:14  
                                                  展开↯

                                                  #606

                                                  作者:广西河池市宜州市
                                                  Div里超出部分,省略号显示

                                                  1.一行显示并出现省略号

                                                  1)三个属性:
                                                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;
                                                  Run code
                                                  Cut to clipboard

                                                    2)网上张大神想出来的margin-top负值的办法:
                                                    <div class="box">     <div class="wz">文字内容</div>     <div class="dot">...</div> </div>
                                                    Run code
                                                    Cut to clipboard

                                                      CSS:
                                                      .box{     width:设定宽度;     height:设定高度;     overflow:hidden;   } .wz{     float:left;     height:设定同样的高度;     margin-right:这里的大小是给省略号留的空间;   } .dot{     float:right;     width:刚才留的空间大小;     height:设定同样的高度;     margin-top:与高度一样的值的负数;   }
                                                      Run code
                                                      Cut to clipboard

                                                          这种方法应该是兼容所有的浏览器。

                                                          还有用js或者插件来解决的方法,感觉有点麻烦。

                                                        2.两行显示,第二行出现省略号

                                                        当文字强制两行显示,并且在第二行才出现省略号。解决办法:
                                                        text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                                                        Run code
                                                        Cut to clipboard

                                                          这个是使用的是-webkit-的私有属性,只有在谷歌浏览器上才能正确显示出来,其它浏览器无效果,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。
                                                          文章:常用html、demo代码  发表时间:2018-03-01, 17:55:11  
                                                          展开↯

                                                          #607

                                                          作者:广西河池市宜州市
                                                          DIV里面的图片水平与垂直居中的方法
                                                          <div class=“box”>   <img /> </div>
                                                          Run code
                                                          Cut to clipboard

                                                            1.水平居中:
                                                              1)box设置 text-align:center ; text-align:center可以实现子元素字体,图片的水平居中。 2)img设置 margin:0 auto;display:block ; margin:0 auto是针对块元素的水平居中方法,所以要加上display:block。
                                                            Run code
                                                            Cut to clipboard

                                                              2.垂直居中:
                                                                1)图片使用padding,用box的高度减去图片的高度再除以2,就是padding-top的值,这样也可以实现图片在div里居中。也可以在设置margin:0 auto时,把0改为刚才padding-top的值也可以。   2)
                                                              Run code
                                                              Cut to clipboard

                                                                img{     position:relative;     top:50%;     left:50%;     margin-top:负图片height的一半;     margin-left:负图片width的一半;   }
                                                                Run code
                                                                Cut to clipboard

                                                                    3)box设置 display: table-cell;vertical-align: middle; display: table-cell 相当于是把标签元素当作一个单元格来处理。但是唯一的缺点就是IE6/7不兼容。 注意:vertical-align: middle;这个垂直属性,只对 inline 或者 inline-block 元素有效 ☆垂直和水平居中的另外种方法:table的宽高自己设置
                                                                  Run code
                                                                  Cut to clipboard

                                                                    html:
                                                                    <table class="img_meng_show">   <tr>     <td>        <img src="">     </td>   </tr> </table>
                                                                    Run code
                                                                    Cut to clipboard

                                                                      css:
                                                                      .img_meng_show td{    vertical-align: middle;    text-align: center; }
                                                                      Run code
                                                                      Cut to clipboard

                                                                        这样图片就在table里面水平和垂直居中了

                                                                        DIV水平和垂直居中的方法:

                                                                        HTML:
                                                                        <div class="box></div>
                                                                        Run code
                                                                        Cut to clipboard

                                                                          css:
                                                                          .box{   position:absolute(或者是fixed);   top:0;   left:0;   bottom:0;   right:0;   margin:auto;   width:100px;   height:200px; }
                                                                          Run code
                                                                          Cut to clipboard

                                                                             这个能实现div垂直和水平居中,但是必要条件就是宽高必须加上,margin也必须加上。如果想里面的图片也水平和垂直居中,可以参照上面图片用margin-left这种方式;

                                                                             如果只想垂直居中,只要top与bottom,然后 margin:auto 0;

                                                                             同理,只想水平居中,只要top与bottom,然后 margin: 0 auto;

                                                                             但是这种方法不支持ie8以下。

                                                                            还有一种使用css3 translate的方法,能让div垂直水平居中:
                                                                            .box{ position: fixed(或者absolute); top: 50%; left: 50%; width: 100px; /*height: 100px;*/高度可以不定死 background: skyblue; transform: translate(-50%,-50%); }
                                                                            Run code
                                                                            Cut to clipboard
                                                                              文章:常用html、demo代码  发表时间:2018-03-01, 17:53:32  
                                                                              展开↯

                                                                              #608

                                                                              作者:广西河池市宜州市
                                                                              水平垂直居中之table-cell篇
                                                                              <style> .container{ display: table; width: 800px; height: 500px; background-color: red; } .container.item{ display: table-cell; vertical-align: middle; padding: 0 20px; } </style> <div class="container"> <div class="item"></div> </div>
                                                                              Run code
                                                                              Cut to clipboard
                                                                                文章:常用html、demo代码  发表时间:2018-03-01, 17:20:45  
                                                                                展开↯
                                                                                你好,残忍屏蔽广告

                                                                                确定要清除编辑框内容吗?

                                                                                该删除操作将不可恢复。

                                                                                删除 取消

                                                                                激活Windows

                                                                                转到"设置"以激活Windows。