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

<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. Effective Modern C++:02auto

    05:优先使用auto,而非显示类型声明 显示类型声明有下面一些缺点: int x; //未初始化,或者初始化为0,视语境而定 template<typename It> void dwi ...

  2. More Effective C++: 05技术(25-28)

    25:将constructor 和 non-member functions 虚化 所谓 virtual constructor是某种函数,视其输入可产生不同类型的对象.比如下面的代码: class ...

  3. Notepad++中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer indentation level

    使用Notepad++编辑python代码运行遇到了这个问题: IndentationError: unindent does not match any outer indentation leve ...

  4. ural1297 后缀数组+RMQ

    RMQ即求区间(i,j)的最值.通过O(nlogn)处理,O(1)给出答案. RMQ主要是动态规划来做.dp[i][j]表示从i开始的长为2^j的区间最值. 那么可以得到dp[i][j]=max(dp ...

  5. [***]沙雕低错集(算起来因为低错挂掉的分快够我AK三场了……)

    由于沙雕错太多了所以不想写了,看着就难受…… 各种沙雕错(自从上次考试开始各种犯沙雕低错……): !!!sort是不稳定的排序,如果排序结构题只按其中一个关键字排序,那么在关键字相等时,排序多次的结果 ...

  6. Maven启用代理访问

    如果你的公司正在建立一个防火墙,并使用HTTP代理服务器来阻止用户直接连接到互联网.如果您使用代理,Maven将无法下载任何依赖. 为了使它工作,你必须声明在 Maven 的配置文件中设置代理服务器: ...

  7. python 字典索引

  8. IoT SaaS加速器——助力阿尔茨海默病人护理

    场景介绍 阿尔茨海默病,是导致中老年人认知功能障碍的最常见疾病之一,是发生在老年期及老年前期的一种原发性退行性脑病.据估计,全世界痴呆症患者数量为4700万,到2030年将达到7500万人.痴呆症患者 ...

  9. jQuery 练习 dom

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Redis源码解析:04字典的遍历dictScan

    dict.c中的dictScan函数,用来遍历字典,迭代其中的每个元素.该函数使用的算法非常精妙!!!所以必须记录一下. 遍历一个稳定的字典,当然不是什么难事,但Redis中的字典因为有rehash的 ...