元素块的居中

　　首先有这样一个200*200px的元素块在界面内。

　　

　　元素块的水平居中：

　　如果想要让其水平居中，则有三种方法：

　　　　第一种是知道屏幕的长宽，则根据计算，（屏幕宽X-元素块宽Y）/ 2的结果是元素块向右偏移的长度，不过这种方法很蠢笨，通过外边距调整元素的位置只有在调整元素间的间距时才有作用；

　　　　至于第二种，就很合适了，我们不必知道屏幕的宽度，只需要设置外边距:　

  1. .box { width: 200px; height: 200px; background: #333; margin-left: auto; margin-right: auto;}

　　　　也可以这样写：

  1. .box { width: 200px; height: 200px; background: #333; margin:  auto;}

　　　　就可以了！效果：

　　　　第三种方法是运用定位的方法，先把元素块绝对定位，然后左移50%的屏幕宽度，再用负边距向右移元素块50%的宽度。

  1. .box { width: 200px; height: 200px; background: #; position: absolute; left: %; margin-left: -100px;}

　　　　效果：

　　很显然，第二种方法是最简单也是最适用的方法，第三种更适用于元素块在屏幕中的水平垂直居中。

　　元素块的垂直居中：

　　关于元素块的垂直居中，有两种实现的方法。第一种同样是计算坐标偏移的方法，一般不采用。另一种就是运用绝对定位和外边距的方法来垂直居中乃至水平垂直居中。

　　垂直居中：

  1. .box { width: 200px; height: 200px; background: #333; position: absolute; top: 50%; margin-top: -100px;}

　　元素块的水平垂直居中：

  1. .box { width: 200px; height: 200px; background: #333; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px;}

　　其实很简单，就是水平居中和垂直居中的结合罢了！

　　元素块相对于父元素块的居中：

　　比如下面的".content"块是".box"块的子元素块:

  1. .box { width: 500px; height: 400px; border: 1px solid;}
  2. .content {width: 100px; height: 100px; background: #333;}

　　content的水平居中：

  1. .box { width: 500px; height: 400px; border: 1px solid;}
  2. .content {width: 100px; height: 100px; background: #333; margin: 0 auto;}

　　content的垂直居中：

  1. .box { width: 500px; height: 400px; border: 1px solid; position: relative;}
  2. .content {width: 100px; height: 100px; background: #333; position: absolute; top: 50%; margin-top: -50px;}

　　这里要注意：当子元素设置为绝对定位absolute时，如果想对于父元素定位，需要父元素设置"position:relative",即父元素设置为相对定位，否则子元素将相对于body定位。

　　content的水平垂直居中：　

  1. .box { width: 500px; height: 400px; border: 1px solid; position: relative;}
  2. .content {width: 100px; height: 100px; background: #333; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}

文字的居中

　　文字的水平居中：

　　现在是这种情况，元素块中有一行文字，需要将其水平居中。

　　很简单，只需要设置一个属性：

  1. .box { width: 400px; height: 300px; border: 1px solid;}
  2. .text {text-Align: center;}

　　文字的垂直居中：

　　也很简单，只需要设置一个属性，将其行高和元素框高相等：　

  1. .box { width: 400px; height: 300px; border: 1px solid;}
  2. .text {line-height: 300px;}

　　文字的水平垂直居中：

  1. .box { width: 400px; height: 300px; border: 1px solid; margin: 100px auto;}
  2. .text {text-Align: center; line-height: 300px;}

　　如果是多行文字怎么办，很简单，在文字外套一个层级，可以为"div"，也可以讲inline元素设置为"display: block"，先将文字垂直居中，再讲嵌套的文字块在父元素块中居中，这就将其分解为两个问题，解决起来很容易。

　　以上就是居中的几个解决方法，其他一些问题在遇到后会慢慢的整理汇总出来，以供记录和参考。

　　最后附上html代码。

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.          <link type="text/css" rel="stylesheet" href="resource/css//temp.css" />
  6.          <title>CSS各种居中</title>
  7.          <link rel="icon" href="favicon.ico" type="images/x-icon" />
  8.      </head>
  9.  
  10.      <body>
  11.          <div class="box">
  12.              <div class="content"></div>
  13.              <h3 class="text">这是块中的一行文字！</h3>
  14.          </div>
  15.      </body>
  16.  </html>

　　总结：

　　　　扎实的掌握基础知识，再将其灵学活用，这是解决各种问题的唯一方法。

【CSS】 元素块与文字的各种居中解决方案的更多相关文章

  1. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  2. 前端研究CSS之内联元素块级化/区域大小/文字和图标的位置

    做了一天的小按钮基本都是文字+小图标的组合,问题挺多处理的不好,现在总结一下做个了断. //页面结构 <span class="b"> <a href=" ...

  3. css 元素居中各种办法

    一:通过弹性布局<style> #container .box{ width: 80px; height: 80px; position: absolute; background:red ...

  4. CSS元素居中汇总

    总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使  margin-left=margin-right  如果设置  marg ...

  5. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  6. css基础 行内元素 块级元素

    1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...

  7. CSS的块级元素和内联元素，以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  8. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  9. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

随机推荐

  1. laravel中使用mgirations创建和迁移数据库

    使用php artisan make:migration create_links_table命令 编辑2016_04_11_095342_create_links_table public func ...

  2. Time 模块中asctime()、time()、localtime()、ctime()、gmtime()的用法

    Time 模块包含了以下内置函数,既有时间处理的,也有转换时间格式的: time.asctime([tupletime]) 接受时间元组并返回一个可读的形式“Tue Dec 11 18:07:14 2 ...

  3. 使用SqlBulkCopy进行批量插入数据时踩过的坑

    之前一直都没用过SqlBulkCopy关键字进行数据插入,更没了解过. 事因:因业务需要在数据表中添加两列,然后将数据插入进表中 之前都是这样写的 dt.Columns.Add(new DataCol ...

  4. 在Linux安装ASP.Net Core的运行时(Runtime)

    在部署的时候,如果您不想在您的Linux服务器上安装.Net Core SDK,您可以只安装Runtime,接下来我们看看该如何安装运行时Runtime. 下载运行时文件 下载页面:https://w ...

  5. ML.NET Cookbook --- 1.如何从文本文件中加载数据？

    使用ML.NET中的TextLoader扩展方法从文本文件中加载数据.你需要知道在文本文件中数据列在那里,它们的类型是什么,在文本文件中什么位置可以找到它们. 请注意:对于ML.NET只读取文件的某些 ...

  6. Spring Boot - Spring Async

    除了使用Thread.Runnable.TimerTask.FeatureTask.CompletableFuture等类,在Spring Boot中还可以使用注解创建异步任务,可以减少线程处理的代码 ...

  7. python学习之路 一 ：编程语言介绍

    本节重点 理解编程语言是什么? 大体明白,编程语言是如何与计算机底层通信的编程语言有哪些分类? 分别列举主流编程语言的特点 什么是编程,为什么要编程 一.什么是编程语言?为什么要编程? 编程:是个动词 ...

  8. c# 委托与事件的区别

    委托与事件的区别 委托和事件没有可比性,因为委托是数据类型,事件是对象(可以理解为对委托变量的封装.),下面说的是委托的对象(用委托方式实现的事件)和(标准的event方式实现)事件的区别.事件的内部 ...

  9. Java 访问修饰符使用规则

    作用域 当前类 同一package 子孙类 其他package public √ √ √ √ protected √ √ √ × friendly √ √ × × private √ × × × 1. ...

  10. python 中使用 urllib2 伪造 http 报头的2个方法

    方法1. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 #!/usr/bin/pyth ...