<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、垂直居中布局 */

            /* 1.单个元素垂直居中 高度不固定*/

            .content {

                position: relative;

                height: 100px;

                background: #008000;/* height和background测试更好的观看效果 可忽略*/

            }

            .box {

                position: absolute;

                top: 50%;

                transform: translateY(-50%);

                background: #ff9933;

                color: #fff;/* background和color测试更好的观看效果 */

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                高度不固定

            </div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、垂直居中布局 */

            /* 2.单个元素垂直居中 高度不固定 缺点：由父类控制是否居中*/

            .content {

                display: table-cell;

                vertical-align: middle;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                高度不固定

            </div>

        </div>

    </body>

</html>

效果：

pc端常见布局---垂直居中布局 单元素不定高的更多相关文章

  1. pc端常见布局---垂直居中布局 单元素定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. pc端常见布局样式总结（针对常见的）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. css布局 - 垂直居中布局的一百种实现方式（更新中...）

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

  4. pc端常见布局---水平居中布局 单元素不定宽度

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. pc端常见布局---水平居中布局 单元素定宽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  7. 在前端眼中pc端和移动的开发区别

    按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...

  8. PC端自适应布局

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...

  9. 第 31 章 项目实战-PC 端固定布局[3]

    学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区 本节课 ...

随机推荐

  1. tomcat 开机自启方法

    1.把下面的代码保存为tomcat文件,并让它成为可执行文件 chmod 755 tomcat. #!/bin/bash # # /etc/rc.d/init.d/tomcat # init scri ...

  2. [poj1144]Network（求割点模板）

    解题关键:割点模板题. #include<cstdio> #include<cstring> #include<vector> #include<stack& ...

  3. HDU 4625. JZPTREE

    题目简述:给定$n \leq 50000$个节点的数,每条边的长度为$1$,对每个节点$u$,求 $$ E_u = \sum_{v=1}^n (d(u, v))^k, $$ 其中$d(u, v)$是节 ...

  4. (十四)hibernate逆向工程

    一.hibernate逆向工程生成实体 介绍一个模型设计工具PowerDesigner,这个是j2ee开发必要的一个工具.一般在开发中先使用PowerDesigner 创建实体关系图即概念模型.建立了 ...

  5. 《剑指offer》面试题21—包含min函数的栈

    题目:定义栈数据结构,并在该数据结构中实现一个能获得栈最小元素的函数min.要求push,min,pop时间都是O(1). 思路:要用一个辅助栈,每次有新元素压栈时辅助栈压入当前最小元素:min函数直 ...

  6. 苦逼三流小公司程序员这半年找工作经历(3)——选择offer

    本文按照企业规模.性质.规模,分成三类,点评一下遇到的这些公司.也算是为半年找工作经历的一个总结. 1,三流小公司 公司规模类似于笔者跳槽前所在企业,性质有外商独资.合资,当然大多数都是民营企业,规模 ...

  7. 仿iPhone、iPad界面滑屏切换

    <!DOCTYPE html> <html lange='en'> <head> <meta charset='UTF-8'> <title> ...

  8. Litjson

    http://www.cnblogs.com/peiandsky/archive/2012/04/20/2459219.html JSON(JavaScript Object Notation) 是一 ...

  9. appium自动化测试框架——在python脚本中执行dos命令

    一般我们运行dos命令,会有两种需求,一种是需要收集执行结果,如ip.device等:一种是不需要收集结果,如杀死或开启某个服务. 对应的在python中就要封装两种方法,来分别实现这两种需求. 1. ...

  10. Whatweb网站指纹信息收集工具

    常规扫描:whatweb www.baidu.com 批量扫描: whatweb -i /root/12.txt 详细回显扫描:whatweb -v www.baidu.com 加强扫描强度:what ...