<!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. PowerDesigner 导出 Excel

    http://www.cnblogs.com/hggc/archive/2013/10/15/3369857.html

  2. wxGlade的图标，原来是来自蒙德里安的名画！

    一直用wxGlade做GUI的,今天突然发现它的图标和一副油画很像. wxGlade的图标,图标的文件名竟然就叫做mondrian.ico 蒙德里安创造了很多这种纯粹的基本要素的作品,下面是其中之一, ...

  3. java继承使用的细节问题？

    关于java继承的基本概念就不多说了,下面就说说继承使用应该注意的细节问题? 示例 一: package com.bizvane; class Fu{ public Fu() { System.out ...

  4. WPF后台修改内容界面不显示问题

    通知3部曲:1.Model继承并实现 INotifyPropertyChanged 接口:2.数据集合使用ObservableCollection<T>集合:3.View使用Binding ...

  5. 搭建 Keras

    首先安装ipython ipython安装完成以后出现如下界面 然后安装theano 中途安装因为网络不好,造成超时而停止安装或者停滞不前,则按下Ctrl+C,停止此操作,或者关掉Anaconda P ...

  6. Object Detection(RCNN, SPPNet, Fast RCNN, Faster RCNN, YOLO v1)

    RCNN -> SPPNet -> Fast-RCNN -> Faster-RCNN -> FPN YOLO v1-v3 Reference RCNN: Rich featur ...

  7. ps图层混合计算公式

    样式效果 http://www.jb51.net/photoshop/104100.html 注释: 1.混合模式的数学计算公式,另外还介绍了不透明度. 2.这些公式仅适用于RGB图像,对于Lab颜色 ...

  8. java利用URL发送get和post请求

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  9. Unity---协程的简单使用

    1.作用 协程的作用一共有两点: 延时执行代码. 在某项操作完后再执行代码. 就是控制代码在特性的时间执行. 2.协程和线程的区别 协程不是异步,不需要考虑同步和锁问题 线程避免了无意义的调度,提高了 ...

  10. 《SQL 进阶教程》 case:练习题1-1-2 转换行列——在表头里加入汇总列

    select case when sex = 1 then '男性' else '女性' end as '性别', sum(case when name='哈尔滨' THEN population e ...