<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> 多行文字实现垂直居中 </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style type="text/css">

 div#wrap {

  display:table;

  border:1px solid #FF0099;

  background-color:#FFCCFF;

  width:380px;

  height:200px;

  _position:relative;

  overflow:hidden;

 }

 div#subwrap {

  vertical-align:middle;

  display:table-cell;

  _position:absolute;

  _top:50%;

 }

 div#content {

  _position:relative;

  _top:-50%;

 }

 .p{

     width:200px;

     height:200px;

     background-color:lightblue;

     display: table;

 }

 .c{

     display: table-cell;

    width:50px;

     height:50px;

     background-color:lightgreen;

 }

</style>

</head>

<body>

<div id="wrap">

     <div id="subwrap">

         <div id="content">

             <div style="width:100px;height:100px;background-color:black;margin:0 auto;"></div>

         </div>

     </div>

</div>

</body>

</html>

css 标签 垂直居中的更多相关文章

  1. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  2. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  3. 转: css实现垂直居中的方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...

  4. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  5. css 文字垂直居中问题

    CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...

  6. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  7. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  8. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  9. CSS标签居中

    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...

随机推荐

  1. Delphi Memory-Mapped File简单示例

    { Copyright ?1999 by Delphi 5 Developer's Guide - Xavier Pacheco and Steve Teixeira } unit MainFrm; ...

  2. Java进制转换

    其他转10进制 System.out.println(Integer.parseInt("10", 2));// bin System.out.println(Integer.pa ...

  3. C# winForm程序开机启动和托盘显示 (转http://blog.csdn.net/xinyue3054/article/details/6599508）

    这段时间一直进行cs项目,故整理下开机自动运行.托盘.显示.隐藏. (1).在窗口上点击关闭按钮或者最小化时将托盘显示: (2).双击托盘图标显示窗口: (3).右键点击托盘图标提供三个菜单选项,“退 ...

  4. SMART Goals

    Once you have planned your project, turn your attention to developing several goals that will enable ...

  5. 导入maven工程并配置maven环境

    步骤一 : 选择 "Import"操作 有两个途径可以选择 "Import"操作; 1>"File"--> "Impo ...

  6. logback详细配置(三)

    转自:http://blog.csdn.net/haidage/article/details/6794540 <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NE ...

  7. LeetCode Longest Substring with At Most Two Distinct Characters

    原题链接在这里:https://leetcode.com/problems/longest-substring-with-at-most-two-distinct-characters/ 题目: Gi ...

  8. C语言语句分类：大致可分为六大类

    #include <stdio.h> void main() { int sign, i, n; float sum; printf("please input an integ ...

  9. jQuery学习之jQuery Ajax用法详解（转）

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  10. Power-BI免费版常用功能之同比、环比

    Power-BI免费版也可以实现同比.环比的功能.要实现同比.环比的功能,要在筛选行添加年份.月的筛选,并且指定某年份.月份.场景:如图想要在简表中显示上年收入.收入同比.收入同比差值.上月收入.收入 ...