<!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. CodeForces 1118F2. Tree Cutting (Hard Version)

    题目简述:给定$n \leq 3 \times 10^5$个节点的树,其中一部分节点被染色,一共有$k$种不同的颜色.求将树划分成 $k$ 个不相交的部分的方案数,使得每个部分中除了未染色的节点以外的 ...

  2. 《Java多线程编程核心技术》读后感（十五）

    线程的状态 线程对象在不同的运行时期有不同的状态,状态信息就存在与State枚举类中. 验证New,Runnable,Terminated new:线程实例化后还从未执行start()方法时的状态 r ...

  3. 正则表达式/i,/g,/ig,/gi,/m的含义

    正则表达式中/i,/g,/ig,/gi,/m的区别和含义 /i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找.忽略大小写)/ig(全文查找.忽略大小写)

  4. Vue实现一个MarkDown编辑器

    Vue实现一个markdown编辑器 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大 ...

  5. HDU2874【LCA(模板)】

    第一题LCA,代码参考自:Ice_Crazy 思路: 这个最短路算法是想都别想了,可以看出这幅图就是树嘛,那么对于查询就是求树上两个结点最短距离. 这里就是利用LCA的tarjan离线算法. 算法的大 ...

  6. Codeforces86D【莫队算法】

    题意: 给一个序列和一些区间,每次询问对区间所有不同的数,求每个不同的出现的个数的平方*其值的总和 2*2*1+1*1*2 思路: 裸的莫队算法. 补: 1.cmp写错. 2.LL运算不会进行转化. ...

  7. css布局知识点汇总

    昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a ...

  8. js函数—隐形参数this

    前言 this是函数中的隐形参数,它绑定的值取决于函数的调用位置. this的定义 <你不知道的js>中是这样说的:是函数体内的隐式参数,this就是记录函数调用上下文的一个属性.可以在函 ...

  9. Java基础笔记（二）——配置环境变量

    https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 到此处下载jdk,并安装.(选 ...

  10. [Android]Android四大组件之Service总结

    一.Service介绍 Service是Android中实现程序后台运行的解决方案,它非常适合用于去执行那些不需要和用户交互而且还要长期运行的task.Service的运行不需要依赖于任何用户界面,即 ...