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. C# 获取windows特殊路径

    虽然是古老的问题,最近用到这个,查一下还不少东东呐 一.使用Environment.SpecialFolder 该方法最简单,直接使用即可,只是提供的特殊路径比较少. (1)使用方法:string p ...

  2. hdu 3271 SNIBB 数位DP+二分

    思路:dp[i][j]:表示第i位在B进制下数字和. 用二分找第k个数! 代码如下: #include<iostream> #include<stdio.h> #include ...

  3. （转）Android: NDK编程入门笔记

    转自: http://www.cnblogs.com/hibraincol/archive/2011/05/30/2063847.html 为何要用到NDK? 概括来说主要分为以下几种情况: 1. 代 ...

  4. lintcode: 生成括号

    生成括号 给定 n 对括号,请写一个函数以将其生成新的括号组合,并返回所有组合结果. 样例 给定 n = 3, 可生成的组合如下: "((()))", "(()())&q ...

  5. PHP 反射机制Reflection

    简介 PHP Reflection API是PHP5才有的新功能,它是用来导出或提取出关于类.方法.属性.参数等的详细信息,包括注释. class Reflection { } interface R ...

  6. PushBackInputStream与PushBackInputStreamReader的用法

    举个例子:获取XX内容 PushBackInputStream pb=new PushBackInputStream(in,4);//4制定缓冲区大小 byte[] buf=new byte[4]; ...

  7. QStandardItemModel简单好用，QTableView带进度条

    类QabstractItemModel,QabstractListModel,QAbstractTableModel不保存数据,用户需要从这些类派生出子类,并在子类中定义某种数据结构来保存数据.与此不 ...

  8. [PHP]利用XAMPP搭建本地服务器, 然后利用iOS客户端上传数据到本地服务器中(三. PHP端代码实现)

    一.安装XAMPP   http://www.cnblogs.com/lidongxu/p/5256330.html 二. 配置MySql http://www.cnblogs.com/lidongx ...

  9. linux中U盘umonut时出现“Device is busy”的解决方法

    问题: #umount /dev/sda1 umount: /mnt/usb: device is busy 查找占用目录进程: #lsof |grep /mnt/usb bash 1971 root ...

  10. iOS：Autolayout自动布局实例

    Autolayout自动布局实例即可以用故事板布局,也可以用纯代码创建,各有各的优点:用故事板布局,比较方便,而且直观,可以很直白的看到视图布局后的变化:采用代码布局,虽然代码比较多,有些麻烦,但是可 ...