由12306出错想到的div垂直居中的问题

时间:2022-06-11 07:54:06

今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了由12306出错想到的div垂直居中的问题

看到这个很郁闷,很纠结,但是突然想到了最近一直想实现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. WebStorm 11激活方法

    由于最新jetbrains发布了IntelliJ IDEA 15. PyCharm 5.PhpStorm10.WebStorm 11等各个版本,但是改变了注册方法.原先的注册码包括注册机都已经不能使用 ...

  2. 数据结构之图 Part3 – 2 遍历

    BFS using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...

  3. 自己写的AES和RSA加密解密工具

    package com.sdyy.common.utils; import java.security.Key; import java.security.KeyFactory; import jav ...

  4. NodeJS V8 GC概览

    [A tour of V8: Garbage Collection] http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection 基本是 ...

  5. Linux 操作系统位数&lpar;32or64&rpar;识别

    Linux 操作系统位数识别: LINUX 32位操作系统:Linux x86   i586  i386  i686 i... LINUX 64位操作系统:Linux x64x86_64  X64 . ...

  6. Curling 2&period;0&lpar;dfs&rpar;

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8795   Accepted: 3692 Description On Pl ...

  7. MCU开发之I2C通信

    程序状态字PSW是8位寄存器,用于存放程序运行的状态信息,PSW中各位状态通常是在指令执行的过程中自动形成的,但也可以由用户根据需要采用传送指令加以改变.各个标志位的意义如下: PSW.7(Cy):进 ...

  8. nodejs adm-zip 解压文件 中文文件名乱码 问题解决

    修改需要使用到iconv-lite包 (npm安装即可),修改 zipEntry.js 文件中的 entryName 方法 var iconv = require('iconv-lite'); var ...

  9. 187&period; Repeated DNA Sequences重复的DNA子串序列

    [抄题]: All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: &qu ...

  10. 真刀实战地搭建React&plus;Webpack&plus;Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...