实现高度自适应并且上下居中

<div id="wrap">
<div class="box">DemoSeat</div>
</div>
<style>
#wrap {
position: fiexd;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
.box {
veralign: middle;
width: 500px;
margin: 0 auto;
&:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
veralign: middle;
}
}
}
</style>

CSS 高度居中方案的更多相关文章

  1. css高度居中

    1.已知元素高度 // 子盒子 #div1{ width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50 ...

  2. CSS 绝对居中方案

    .Absolute-Center { margin: auto; position: absolute; top:;;;; }

  3. css常用居中

    对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...

  4. CSS高度塌陷问题解决方案

    高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  5. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  6. CSS中居中的完全指南(中英对照翻译)

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  7. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  8. 使用Flexbox实现CSS竖向居中

    竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...

  9. CSS标签居中

    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...

随机推荐

  1. 洛谷2050 BZOJ2897美食节题解

    放个链接 BZ链接 其实这题就是修车的加强版,做法差不多,还是对于每个厨师进行拆点 可是这样强行建图跑网络流会T飞 我们发现,如果一个厨师没有做倒数第x到菜,他一定不会做倒数第x+1到菜 我们的每次增 ...

  2. PB 级数据处理挑战,Kubernetes如何助力基因分析?

    摘要: 一家大型基因测序功能公司每日会产生 10TB 到 100TB 的下机数据,大数据生信分析平台需要达到 PB 级别的数据处理能力.这背后是生物科技和计算机科技的双向支撑:测序应用从科研逐步走向临 ...

  3. js cookies 的写入、读取、删除

    //写cookies //escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串.function setCookie(name,value) {     var Days ...

  4. Myeclipse运行提示错误: 找不到或无法加载主类 test.test1 终极解决办法

    前提是代码没有问题 简单粗暴的解决办法: 重启电脑 解决办法2: 1.在控制台中点开“Problems”,查看里面的错误.如果是多个项目,可以将其他项目暂时关闭. 根据错误进行处理. 2.把项目cle ...

  5. oracle显示和设置环境变量

    概述:可以用来控制输出的各种格式. (1)linesize  用于控制每行显示多少个字符,默认80个字符. 基本用法:set linesize 字符数 aql>show linesize sql ...

  6. keep-alive vue组件缓存避免多次加载相应的组件

    keep-alive vue组件缓存避免多次加载相应的组件

  7. Python中的生成器(generator)

    生成器: 在函数内部包含yield关键字,那么该函数执行的结果就是生成器(生成器即是迭代器) yield的功能:1.把函数的执行结果做成迭代器(帮函数封装好__iter__(),__next__()方 ...

  8. @gym - 101190B@ Binary Code

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 我们称一组字符串是 "前缀码",当且仅当不存 ...

  9. python命令之m参数 局域网传输

    在命令行中使用python时,python支持在其后面添加可选参数. python命令的可选参数有很多,例如:使用可选参数h可以查询python的帮助信息: 可选参数m 下面我们来说说python命令 ...

  10. P3899 [湖南集训]谈笑风生 主席树

    #include<iostream> #include<string.h> #include<algorithm> #include<stdio.h> ...