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

<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. Ubuntu里node命令出错,找不到

    ubuntu里用sudo apt-get install nodejs安装Node.js后, 发现terminals里运行node命令(比如node –-version)时候会有No such fil ...

  2. 国外最受欢迎的十大社交APP网站

    国外最受欢迎的十大社交APP网站 2016-11-01 09:34悠悠国外网     有哪些好的国外社交软件你知道吗,想使用国外流行的社交应用来体验不一样的社交么,想和外国友人交朋友么.本期悠悠国外网 ...

  3. xib搭建scrollView无法滑动的问题

    最近给xib中的scrollView添加contentView的时候,view的约束总是参照莫名其妙的东西,不是frameLayout就是safeArea 因为之前都是默认以superView为参照系 ...

  4. js全局方法

    1.eval() 参数:string要计算的表达式或要执行的语句 返回值:计算结果或者执行结果 使用方法: (1)eval("2+2")返回值:4 (2)eval("x= ...

  5. POJ - 1679_The Unique MST

    The Unique MST Time Limit: 1000MS Memory Limit: 10000K Description Given a connected undirected grap ...

  6. html的select标签清空option!~~~~

    最好的方法:document.getElementById("selectId").length = 1; 也可以document.getElementById("sel ...

  7. javascript导图 标签: javascript 2015-12-06 16:37 721人阅读 评论(24)

  8. oracle函数 nls_charset_name(n1)

    [功能]返回字符集名称参应id值 [参数]n1,数值型 [返回]字符型 sql> select nls_charset_name(852) from dual; nls_char ------- ...

  9. SaltStack之用户账户管理

    在Salt.state中,user 模块是用来创建用户和管理用户设定的,用户可以被设置成 present 状态或者 absent 状态 注释: present:添加用户 absent   : 删除用户 ...

  10. 割点(tarjan)

    对于根来说,如果它有超过1棵子树,那么它是一个割点 对于非叶结点来说,如果它的某一个儿子没有回边能到达高于它的点,那么它是一个割点 叶节点不是割点 //洛谷3388 #include<algor ...