1. HTML元素

    <div>水平垂直居中</div>

  2. css样式

    div{
    
    width:200px;height:200px;  /*设置div的大小*/
    
    border:1px solid green;    /*边框*/
    
    text-align: center;        /*文字水平居中对齐*/
    
    line-height: 200px;        /*设置文字行距等于div的高度 即实现垂直居中*/
    
    overflow:hidden;
    
}

  3. 显示效果

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADOCAIAAAASShGQAAADQ0lEQVR4nO3Y0U6jQABAUT59/xzfXK0WBlpuoZ4THgwZYMpcIHGa4XjTqyfAnzDN8zz9m2y2g7Zvnb0ydd6XzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzihcvrNp6uY8cq2j51P+3id6886mMauX2DR409l2TGZ5wDm9eWc7xm9a+B0dr57wwfmf07t19vR1OqLj4w4/rT/R2ded9/4ePP+9MeMfwU0vvx3jz+linf28xV/v9cJN/3XMjkW9l8LyRZd3LrcyLT5IOjvcTWeDqzUS5dbxOlt11c5uln/8dg+O3NrZ+Edt6ytTZ6800tngin6u69bxPydzb5LLO5db0dnL/Pq4D97xrcNGzj+Y473z6Oykfu1sHrvpB3U2vn/13flz/Pib9bSu19mDz/fqy2PE+FH3JjCe5oO/9yQu1tnqMszf/9MxcoatVxwfszDb8UN2zOeErtTZwuvhwZM8OF5nq67U2Y3lD9DyUcsDBj+agx/Zz6MGj31w/ud04c7mXTf9JOvkfQbPpzMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKt53ZbAdt/zuDo+mMwgeest4QFJUBAQAAAABJRU5ErkJggg==" alt="" />

div中文字水平和垂直居中的css代码的更多相关文章

  1. CSS 之 div中文字超出时自动换行

          在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...

  2. HTML DIV中文字自动换行 , 顶部对齐

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

  3. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  4. 如何让DIV在窗口水平和垂直居中

    本实例以新文档开始 2 先放置一个div,并且设置class名为aa,赋予它css属性: width:0;height:0;position:fixed;left:50%;rigth:50%;top: ...

  5. 让块元素在div中水平居中，并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  6. 文字水平居中和垂直居中的CSS

    首先选择一个需要显示文字的选择器,我这里选择的是微信小程序里面的<view>选择器,在其他语言(如html)的选择器里是一样的做法: <view class="btn-it ...

  7. 设置div中文字超出时自动换行

    一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...

  8. div中文字上下居中

    <div class="title">Title</div> 1. 将div高度设成定值 2. 将line-height设成定值 3. 将text-alig ...

  9. div中文本水平居中，垂直居中

    div: text-align=center; hight=100px; line-hight=100px;(行高需要和高度设置成一样)

随机推荐

  1. IOS Crash捕获

    IOS Crash ,就两种情况:一种是异常,另一种是中断［信号量］. #include <libkern/OSAtomic.h> #include <execinfo.h> ...

  2. HTTP报头详解

    HTTP头字段包括4类:      general-header ; 通用报头      request-header ; 请求报头      response-header ; 响应报头      ...

  3. 关于JS中的constructor与prototype

    ======================================================================== 在学习JS的面向对象过程中,一直对constructo ...

  4. 如何开发一个自己的 RubyGem？

    「如何测试你的 RubyGem?」的前导文章 什么是 RubyGem RubyGem 是 Ruby 语言的标准源码打包格式. 大家一直都在用gem这个命令,但是很少有人知道这个东西是怎么来的,这里我从 ...

  5. FZU2165 v11(带权的重复覆盖)

    题意:有n个boss,m种武器,每种武器选用的时候需要有一定的花费ci,然后这个武器可以消灭掉其中一些BOSS,问你消灭完所有的BOSS,需要的最少花费是多少. 当时比赛的时候,看到这题以为是什么网络 ...

  6. 在struts-config.xml中配置validator-plugin导致404 Servlet action is not available

    就是在struts-config.xml中添加了这么一段 <plug-in className="org.apache.struts.validator.ValidatorPlugIn ...

  7. tomcat manager app 和 host maganger

    当你以为你了解某个东西时,其实你不了解它.比如tomcat也可以像jboss一样有用户名和密码 就在apache-tomcat-8.0.21\conf\tomcat-users.xml里配置用户名和密 ...

  8. 关于MySQL

    DBMS - 数据库管理系统(Database Management System) RDBMS - 关系数据库管理系统(Relational Database Management System) ...

  9. 【Cocos2d实例教程一】xcode5下Cocos2d环境的搭建

    (转载请注明出处:http://blog.csdn.net/buptgshengod) 第一步,现在要安装集成环境xcode5,安装xcode5需要系统至少是os x 10.8.5. 第二步,下载co ...

  10. CF 2013-2014CTS01E04(Killer Challenge-将质因数存在 进行Bitmask)

    首先,把P进行质因数分解,每一个不用的质因数压成1位 f[i][j]表示1前i位用j“拥有”的质因数表示. 然后都懂得... #include<cstdio> #include<cs ...