position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);

当元素变为position:absolute时,该元素不占据文档流,text-align:center失效,则可以通过上述方法使元素中的内容垂直水平居中。

或者:

如果仅仅时元素中的文字居中的话, 给该元素加width:100%;text-align:center;就可以成功实现了。

元素加了position:absolute则该元素的text-align:center居中失效的解决办法的更多相关文章

  1. ios端position为fixed失效的解决办法

    关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...

  2. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  3. 未能加载文件或程序集“Antlr3.Runtime”或它的一个依赖项的解决办法

    一.问题症状 未能加载文件或程序集“Antlr3.Runtime”或它的一个依赖项.参数错误.   二.问题起因和经过 今天我在虚拟机下做开发,asp.net mvc4开发测试微信接口,一不小心虚拟机 ...

  4. jquery中,使用append增加新元素时,新增元素的绑定监听事件失效的解决办法

    $("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...

  5. windbg 加载dump监测蓝屏原因时出现重复的星星框提示解决办法

    加载dump文件出现了重复上边的信息 总结: 要reload一下环境,说明符号库未加载出现的错误,!sym noisy 显示详细信息 ,reload重载符号库,未找到的,从服务器进行下载, 注意,第一 ...

  6. 父元素没有设置定位 position absolute 解析

    1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  7. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  8. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  9. 通过案例理解position:relative和position:absolute

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...

随机推荐

  1. 动态可视化 数据可视化之魅D3,Processing,pandas数据分析,科学计算包Numpy,可视化包Matplotlib,Matlab语言可视化的工作,Matlab没有指针和引用是个大问题

    动态可视化 数据可视化之魅D3,Processing,pandas数据分析,科学计算包Numpy,可视化包Matplotlib,Matlab语言可视化的工作,Matlab没有指针和引用是个大问题 D3 ...

  2. WebService工作原理及传输安全问题

    WebService是一种能够接收从Internet或者Intranet外其它系统发来的请求,是一种轻量级的独立通讯技术. XML(Extensible MarkUp Language)扩展型标记语言 ...

  3. # Writing your first Django app--part 3 about view

    添加更多的view 写actually有用的view 使用模版来设计view 使用模版设计view的捷径:render() 抛出异常404 抛出异常404-快捷方法: get_object_or_40 ...

  4. TCP/IP协议层

    除了少数外,OSI协议簇本身已经成为Internet历史早期的遗留产物.当前OSI协议对于网络技术的贡献看来主要是对学习网络的学生讲述模块化的协议簇时,可以引用它的参考模型进行说明等的有限用途. 下面 ...

  5. 新浪微博 oauth2.0 redirect_uri_mismatch

    新浪微博开放平台出来很久了,现在才开始研究,貌似有点晚了.... 第一次折腾,总是出现这样那样的问题,即使照着别人成功的例子也是一样,这不,开始运行的时候,运行下面的例子,总是报error:redir ...

  6. Free-form语言

    在计算机编程领域,程序指令文本中的字符在『纸面』上所处的位置无关紧要 - 不像老式的穿孔卡片系统(punched card system)程序指令文本需要放置在指定列,这种编程语言就可算是自由形式语言 ...

  7. Postgresql分表与优化

    --1.创建主表 CREATE TABLE tbl_partition ( date_key date, hour_key smallint, client_key integer, item_key ...

  8. CPP_类默认函数:构造函数,拷贝构造函数,赋值函数和析构函数

    类默认函数:构造函数,拷贝构造函数,赋值函数和析构函数 // person.h #ifndef _PERSON_H_ #define _PERSON_H_ class Person{ public : ...

  9. eclipse配置代码自动提示

    Eclipse默认只有"."之后才有代码提示. [windows-->preferences] 把这里的点改成[.abcdefghijklmnopqrstuvwxyzABCD ...

  10. webpack1--安装与初始化

    webpack可用于打包所有的脚本,图片,样式表及其他资源. 今天来讲一下如何安装webpack 及 创建package.json.webpack依赖于npm和 node,所以本文是假设你已安装好了n ...