今天想看看元旦回家还有没有余票,偷偷的打开了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垂直居中的问题的更多相关文章

  1. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  2. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  3. div垂直居中的问题

    工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...

  4. css的div垂直居中的方法,百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  5. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  6. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  7. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...

  8. 纯css使div垂直居中,div垂直,div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  9. div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. Linux 学习笔记 基本的bash shell命令

    Linux 文件系统 Linux讲文件存储在单个目录结构(虚拟目录)中,虚拟目录包含了安装在PC上的所有存储设备的文件路径. Linux虚拟目录中比较复杂的部分是它如何来协调管理各个存储设备.Linu ...

  2. View绘制详解(二),从setContentView谈起

    掐指一算,本来今天该介绍View的测量了,可是要说View的测量,那就要从setContentView谈起了,setContentView本身涉及到的东西也是挺多的,所以今天我们就先来看看这个setC ...

  3. 由strupr,strlwr体会如果将字符常量转换为变量进行修改,体会常量的静态存储

    #include <stdio.h> #include <string.h> int main() { char s[]="Copywrite 1999-2000 G ...

  4. div居中的三种方法

    方法1: #div1{ width:200px; height:200px; background:green; position:absolute; left:0; top:0; right:0; ...

  5. [转]Oracle Stored Procedures Hello World Examples

    本文转自:http://www.mkyong.com/oracle/oracle-stored-procedures-hello-world-examples/ List of quick examp ...

  6. [转]使用ADO.NET访问Oracle存储过程

    本文转自:http://www.cnblogs.com/datasky/archive/2007/11/07/952141.html 本文讨论了如何使用 ADO.NET 访问 Oracle 存储过程( ...

  7. 用happen-before规则重新审视DCL(转载)

    编写Java多线程程序一直以来都是一件十分困难的事,多线程程序的bug很难测试,DCL(Double Check Lock)就是一个典型,因此对多线程安全的理论分析就显得十分重要,当然这决不是说对多线 ...

  8. 回环栅栏CyclicBarrier

    通过它可以实现让一组线程等待至某个状态之后再全部同时执行.叫做回环是因为当所有等待线程都被释放以后,CyclicBarrier可以被重用.我们暂且把这个状态就叫做barrier,当调用await()方 ...

  9. android之模拟器更新底层

    Android源码修改,编译后得到system.img 替换\AndroidSDK\system-images\android-21\android-tv\armeabi-v7a\目录中的system ...

  10. Jquery 获取checkbox的checked问题

    这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结... 事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现. 下面来看看网上大多资料的说 ...