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. Codeforces Round #254DIV2

    C:万恶的一道题: 开始想用贪心做:每次去除一个点,相应的去除相连边,结果BUG了,想想也对,因为有一次去掉多个点的情况, 后来被送一助攻,队友给出一个猜想:可能枚举一条边即可产生最大值:然后小小证明 ...

  2. POJ 3185

    The Water Bowls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4088   Accepted: 1609 D ...

  3. Web App中的Flexbox应用

    虽然语法可能比较混杂,但 Flexbox 还是名不虚传的.它创造的是可伸缩的.有弹性的.可改变视觉顺序的智能盒子.它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置.使用盒模型来工作是非 ...

  4. ExtJs布局之viewport

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  5. Codeforces Round #336 (Div. 2) D. Zuma 区间dp

    D. Zuma   Genos recently installed the game Zuma on his phone. In Zuma there exists a line of n gems ...

  6. poj 3621(最优比率环)

    题目链接:http://poj.org/problem?id=3621 思路:之前做过最小比率生成树,也是属于0/1整数划分问题,这次碰到这道最优比率环,很是熟悉,可惜精度没控制好,要不就是wa,要不 ...

  7. 深入理解Windows X64调试

    随着64位操作系统的普及,都开始大力进军x64,X64下的调试机制也发生了改变,与x86相比,添加了许多自己的新特性,之前学习了Windows x64的调试机制,这里本着“拿来主义”的原则与大家分享. ...

  8. 深入Java集合学习系列：HashMap的实现原理--转

    原文出自:http://www.cnblogs.com/xwdreamer/archive/2012/06/03/2532832.html 1. HashMap概述: HashMap是基于哈希表的Ma ...

  9. redis专题--slow log详解

    SLOWLOG subcommand [argument] 什么是 SLOWLOG Slow log 是 Redis 用来记录查询执行时间的日志系统. 查询执行时间指的是不包括像客户端响应(talki ...

  10. hadoop 1 testcase运行方法

       转入hadoop2.0后,逐渐忘记了之前做testcase运行的方法,记录一下:    ant -Dtestcase=Test***    如果只运行core包得testcase可以    an ...