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. 疯狂java讲义——初始化块

  2. Unity3D判断鼠标向右或向左滑动，响应不同的事件

    private var first = Vector2.zero; private var second = Vector2.zero; function Update () { } function ...

  3. php 如何判断一个常量是否已经定义

    php 如何判断一个常量是否已经定义 http://blog.csdn.net/raojinpg/article/details/6222882 如果看过手册的人肯定知道,可以直接忽视 不过在实际项目 ...

  4. iOS警告－Warning: Error creating LLDB target at path（模拟器警告）

    Warning: Error creating LLDB target at path '/Users/apple/Library/Developer/Xcode/DerivedData/Observ ...

  5. C# WinForm窗口最小化到系统托盘

    * C# WinForm窗口最小化到系统托盘http://hi.baidu.com/kfxtgtqyapouyze/item/8ccfdcd5a174a7312a35c7c3 主要功能:(1).程序启 ...

  6. HDU5569/BestCoder Round #63 (div.2) C.matrix DP

    matrix Problem Description Given a matrix with n rows and m columns ( n+m is an odd number ), at fir ...

  7. 利用securecrt在linux与windows之间传输文件

    SecureCRT这款SSH客户端软件同时具备了终端仿真器和文件传输功能.比ftp命令方便多了,而且服务器不用再开FTP服务了.rz,sz是便是Linux/Unix同Windows进行ZModem文件 ...

  8. 华为OJ：字符串合并处理

    字符串合并处理 按照指定规则对输入的字符串进行处理. 详细描述: 将输入的两个字符串合并. 对合并后的字符串进行排序,要求为:下标为奇数的字符和下标为偶数的字符分别从小到大排序.这里的下标意思是字符在 ...

  9. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  10. ActiveMQ和Tomcat的整合应用(转)

    转自:http://topmanopensource.iteye.com/blog/1111321 ActiveMQ和Tomcat的整合应用 博客分类: ActiveMQ学习和研究   在Active ...