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

<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. springboot 自定义starter之AutoConfiguration【原】

    八.自定义starter AutoConfiguration: 1.这个场景需要使用到的依赖是什么? 没有特别依赖的配置 2.如何编写自动配置 @Configuration //指定这个类是一个配置类 ...

  2. FastAdmin 开发第 4 天:初试命令行

    FastAdmin 最强大的是命令行 先从 test 表开始. 在 FastAdmin 默认有一个 test 表格,用于命令行 crud 测试. 如何开始? 只需要在项目命令行中输入以下命令就会自动生 ...

  3. <Mysql必知必会> ---- 笔记

    转载自  https://www.jianshu.com/p/294502893128 挺基础的mysql的书籍,基本上都是如何操作的语法. 第1章 了解SQL 主键(primary key):能够唯 ...

  4. Spring中配置DataSource数据源的几种选择

    从JNDI获得DataSource. 从第三方的连接池获得DataSource. 使用DriverManagerDataSource获得DataSource. 一.从JNDI获得DataSource ...

  5. day13 SQLAlchemy

    ORM:也叫关系对象映射 本篇要点: 原生模块 pymsql ORM框架 SQLAchemy pymysql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 需 ...

  6. 使用jQuery的 autocomplete 实现输入框 自动提示补全

    参考网址: https://www.cnblogs.com/jinzhiming/p/6768402.html 插件下载地址: 链接:https://pan.baidu.com/s/1SpP3hixZ ...

  7. MapReduce数据流-Reduce

  8. Hadoop应用程序示例2

  9. HZOJ big

    考试的时候理解错题了(无语)…… 那个看似很长的式子的意义其实是逻辑左移动,就是最高位会出现在最低位的意思(这谁能看出来……).此时x取值经过那个式子后仍然可以遍历[0,2^n), O(m)枚举断点, ...

  10. laravel5.6 QQ 第三方登录

    https://socialiteproviders.github.io/providers/qq.html 1. Installation // This assumes that you have ...