一、单行文本居中

.content{
height:100px;
line-height:100px;
text-align:center;
border:1px solid red;
}

效果图

二、多行文本垂直水平居中

.wrap{
background:green;
width:100%;
display:table;
height:100px;
overflow:hidden;
} .content{
border:1px solid red;
display:table-cell;
width:550px;
vertical-align:middle;
text-align: center;
}

  

效果图

css文本垂直水平居中的更多相关文章

  1. css实现垂直水平居中的方法(个数不限)?

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  2. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  3. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  4. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  5. CSS实现垂直水平居中

    HTML结构: <div class="wrapper"> <div class="content"></div> < ...

  6. Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...

  7. CSS布局--垂直水平居中

    ···设置两个盒子 <div class="parent"> <div class="child"> </div></ ...

  8. CSS - flex 垂直水平居中

    display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */

  9. css实现垂直水平居中的方法

    html结构: <div class="box"> <div>垂直居中</div> </div> 方法1:display:flex ...

随机推荐

  1. AngularJS 学习笔记--01

    学习 AngularJS 要先了解 MVC 模式 , 即 " 模型--视图--控制器 " . 模型: 包含了需要用到的数据 ; 有两种广义上的模型 : 视图模型 , 只表示从控制器 ...

  2. Spring MVC 之@Controller@RequestMapping详解

    一:配置web.xml 1)问题:spring项目中有多个配置文件mvc.xml   dao.xml 2)解决:在web.xml中 <init-param> <param-name& ...

  3. (三)Redis列表List操作

    List全部命令如下: lset key index value # 将列表key下标为index的元素的值设置为value,当 index 参数超出范围,或对一个空列表(key不存在)进行lset时 ...

  4. 923c C. Perfect Security

    Trie树. 要求字典序最小,所以由前到后贪心的选择.建一个trie树维护b数列. #include<cstdio> #include<algorithm> #include& ...

  5. Android 动画之View动画效果和Activity切换动画效果

    View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...

  6. 【CodeChef】Palindromeness(回文树)

    [CodeChef]Palindromeness(回文树) 题面 Vjudge CodeChef 中文版题面 题解 构建回文树,现在的问题就是要求出当前回文串节点的长度的一半的那个回文串所代表的节点 ...

  7. BZOJ4568:[SCOI2016]幸运数字——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4568 https://www.luogu.org/problemnew/show/P3292 A ...

  8. 差点AFO

    差点就AFO了,小伙伴们一定注意护眼啊. 眼睛总算是活过来了. 还有一个月联赛,加油

  9. 搭建openresty需要注意到的地方

    openresty的完整包放在百度云盘linux目录下 一键安装openresty ./install.sh 安装好后,修改nginx.conf配置文件 cd /usr/local/openresty ...

  10. 仅此一文让你明白ASP.NET MVC 之Model的呈现

    本文目的 我们来看一个小例子,在一个ASP.NET MVC项目中创建一个控制器Home,只有一个Index: public class HomeController : Controller { pu ...