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

<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. PHPCMS快速建站系列之标签调用出错

    {pc:content action="position" posid="24" order="listorder ASC" thumb=& ...

  2. PHP Laravel系列之环境搭建( VirtualBox+Vagrant+Homestead+系列网址)

    搭建环境从来都是阻挡一门新技能的最致命的硬伤,为了这个环境,我又是花费了半天的时间,各种问题层出不穷,下面基于网上的一些教程(我看到的都多少有些问题) 开始的时候是在实验楼这个平台上开始学习的,不过 ...

  3. mysqldump导出表结构或者表数据

    加-d参数代表只导表结构,不加此参数则代表导出结构以及表数据,> 代表录入某一文件,若为>>则表示将内容追加到某文件末尾. -- 导出数据库为dbname的表结构 mysqldump ...

  4. linux下的远程数据库(Oracle)中文乱码问题

    适用于本地客户端(PLSQL Developer )访问远程数据库时,查询结果出现的乱码,当在远程数据库上查询结果时显示正常. 1.查询远程数据库的编码: select userenv('langua ...

  5. day18 jQuery,JavaScript高级&Django

    回顾: 整体: - HTML - CSS - JavaScript:基本数据类型:流程控制语句 - DOM - BOM:setInterval() - jQuery - 选择器 - 筛选器 - 内容和 ...

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

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

  7. GIT 公钥配置

    1.下载git 2.ssh-keygen -t rsa -C "xxx@xxx.com" 3.cd ~/.ssh 4.ls 5.cat id_rsa.pub 或者C:\User\x ...

  8. Python 基础03 序列

    sequence 序列 sequence(序列) 是一组有顺序的元素的集合 (严格的说,是对象的集合,但鉴于我们还没有引入"对象" 概念,暂时说元素) 序列可以包含一个或多个元素, ...

  9. shell 解析json

    未完待续 ### 解析api json文件为csv文件 cd /api ` do id=$(echo ${i}|sed 's/.html//') echo -n "${id}|" ...

  10. oracle函数 INSTR(C1,C2[,I[,J]])

    [功能]在一个字符串中搜索指定的字符,返回发现指定的字符的位置; [说明]多字节符(汉字.全角符等),按1个字符计算 [参数] C1    被搜索的字符串 C2    希望搜索的字符串 I     搜 ...