由12306出错想到的div垂直居中的问题
今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了
看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下12306这么大的网站肯定是可以垂直居中的,
试了一下,果然没有让我失望,适应各种分辨率垂直居中。
太好了,果然右键源代码
div class="err_text">
<ul id="error" >
<li id="err_top"> </li>
<li id="err_bot"> 网络可能存在问题,请您重试一下!
</li>
</ul>
</div>
然后再看一下css是怎么写的吧
.err_text{ position:absolute;
margin-top:-159px; top:50%;
left:50%;
margin-left:-247px;
width:495px;
height:282px; }
#error{
width:495px;
margin-left:auto;
margin-right:auto;
list-style:none; }
#error li{
list-style:none;
}
#err_top{
background:url(err_top.gif) no-repeat;
height:78px;
line-height:78px;
width:495px; }
#err_bot{
background:url(err_bot.gif) no-repeat;
height:204px;
padding-top:50px; width:495px;
text-align:center;
font-size:14px;
font-weight:bold; }
这时候聪明的你一定发现了,关键代码其实就是top:50%,left:50%,当然了前提是要绝对定位,这样就可以实现居中了
由12306出错想到的div垂直居中的问题的更多相关文章
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- div垂直居中的问题
工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...
- css的div垂直居中的方法,百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- css 文本和div垂直居中方法汇总
https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...
- 纯css使div垂直居中,div垂直,div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- Android_listView_Listener
layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...
- div 块跟随 鼠标点击
js: $(document).ready(function () { $(".company-contact ul li").click(function (ev) { ...
- 使用CompletionService结合ExecutorService批处理任务
CompletionService用于提交一组Callable任务,其take方法返回已完成的一个Callable任务对应的Future对象. 如果你向Executor提交了一个批处理任务,并且希望在 ...
- MATLAB 误差函数erf(x)
误差函数: 1.误差函数定义为: 它的性质如下: 2 互补误差函数定义为: 它具有如下性质: 下表给出了误差函数的部分数值: 0.00 0.00000 0.05 0.05637 0.10 0.11 ...
- 昨天冲动的搬到外面住了,oh yeah
昨天我纠结了一天,我是否应该搬到外面去住.我骑着我的自行车,在外面闲逛,我心里想的是,我现在没有钱,可以节约一些生活费,租房的日子,我以后始终都是需要面对的,在目前没有那么多钱的情况下,可以不出去外面 ...
- 如何提高jQuery的性能
缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // ...
- spark stream初探
spark带了一个NetworkWordCount测试程序,用以统计来自某TCP连接的单词输入: /usr/local/spark/bin/run-example streaming.NetworkW ...
- WCF图片上传
WCF越来越流行,俺也在用,这是废话.项目中遇到需要图片上传,但是wcf上传会遇到一些异常,调试了N久,找了好多个解决方案才最终解决.代码直接贴上了 /// <summary> /// 笔 ...
- 百度贴吧图片抓取工具(Python)
废话不多说,直接上源码. import os,urllib,urllib2,re path='E:/img' #图片保存路径 url=raw_input('Please input URL:')#贴吧 ...