<!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. Java 打包成exe安装包

    1.在eclipse中导出Runnable JAR file 2.选择主函数所在的类和输出位置后finish: 3.这里选择的打包工具是exe4j,在网上找序列号注册一下,否则在打完后在exe运行时, ...

  2. python-pprint打印函数

    #!/usr/bin/env python # -*- coding:utf-8 -*- import sys,pprint pprint.pprint(sys.path)

  3. [poj3107/poj2378]Godfather/Tree Cutting树形dp

    题意:求树的重心(删除该点后子树最大的最小) 解题关键:想树的结构,删去某个点后只剩下它的子树和原树-此树所形成的数,然后第一次dp求每个子树的节点个数,第二次dp求解答案即可. 此题一开始一直T,后 ...

  4. 火狐restclient安装和使用

    RESTClient是一款用于测试各种Web服务的插件,它可以向服务器发送各种HTTP请求(用户也可以自定义请求方式),并显示服务器响应.使用RESTClient您可以方便的测试各种Web服务,为您的 ...

  5. php如何判断文件是否存在，包括本地和远程文件

    当检查的文件是本地时用PHP自带的file_exists检查就行了,而此函数只能检查本地的函数是否存在, 所以如果要检查远程的文件是否存在只能用其它的方法了. 如果所服务器中php的配置开启了“all ...

  6. Codevs 1159 最大全0子矩阵

    1159 最大全0子矩阵  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 在一个0,1方阵中找出其中最大的全 ...

  7. uoj#399. 【CTSC2018】假面（概率期望）

    传送门 记\(p_{i,j}\)为\(i\)还剩\(j\)滴血的概率,那么\(i\)最后血量的期望就是\[E_i=\sum_{j=0}^{m_i}j\times p_{i,j}\] 然后\(p\)数组 ...

  8. 云服务器、虚拟主机和VPS的区别

    虚拟主机就是利用网络空间技术,把一台服务器分成许多的"虚拟"的主机,每一台网络空间都具有独立的域名和IP地址,具有完整的Internet服务器功能.网络空间之间完全独立,在外界看来 ...

  9. [Xcode 实际操作]七、文件与数据-(13)数据持久化存储框架CoreData的使用：编辑CoreData中的数据

    目录:[Swift]Xcode实际操作 本文将演示如何修改数据持久化对象. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //引入数据持 ...

  10. jmeter后置处理器之正则表达式

    一.基本用法——提取某个值 场景:提取某个值,保存成变量,供后面的接口使用 步骤: 1.运行脚本,从响应结果中查找要提取的值,找到左右边界. 例如要获取“patientInfoId”作为下一个请求的参 ...