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

<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. MUI - sortable在mui.js前端框架不兼容的解决方案

    关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github

  2. <> 是不等号的意思

    <> 是不等号的意思,也有的语言可以写作:#  或者 != 1.=表示 等于: 2.<> 表示不等于:(注释:在 SQL 的一些版本中,该操作符可被写成 !=): 3.> ...

  3. Servlet工作流程

    1.加载Servlet类 类加载器负责加载servlet类. 当Web容器接收到servlet的第一个请求时,将加载servlet类. 2.创建Servlet实例 Web容器在加载servlet类之后 ...

  4. hdu2018 dp

    /* 1~4直接取得: 然后后面的生牛的时候都是前一年的加上一定的数. 从第5年看,第五年出生的牛肯定要加上第四年出生的,然后由于第一个出生的牛开始生小牛,这和 最开始的牛生孩子是一样的,所以+dp[ ...

  5. xcode禁用代码分析的警告和内存泄漏

    在使用xcode进行iphone应用开发时,经常需要添加一些第三方的类库,而一些第三方的类库由于缺少维护,从而导致类库中含有各种警告和各种内存泄漏,但并不影响运行. 倘若我们需要用到第三方库,而由不想 ...

  6. Creating a Pulsing Circle Animation

    原文 https://www.kirupa.com/animations/creating_pulsing_circle_animation.htm Outside of transitions th ...

  7. iOS 设计

    APP引导页设计经验分享 http://www.cocoachina.com/design/20150615/12126.html 获取app安装的进度,6种不同的加载指示 http://www.co ...

  8. python 自动识别黄图

    from watchdog.observers import Observerfrom watchdog.events import *import timeimport sysimport osim ...

  9. 5-2 正则表达式及其re模块

    一 正则表达式 在线测试工具 http://tool.chinaz.com/regex/ 字符 量词 贪婪匹配 贪婪匹配:在满足匹配时,匹配尽可能长的字符串,默认情况下,采用贪婪匹配,<.*&g ...

  10. oracle 和 mysql 遍历当前月份每一天

    获取当前月份的每一天的数据 oracle SELECT TO_DATE(TO_CHAR(SYSDATE, 'YYYYMM'), 'YYYYMM') + (ROWNUM - 1) DAY_ID FROM ...