元素块的居中

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

　　

　　元素块的水平居中：

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

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

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

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

　　　　也可以这样写：

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

　　　　就可以了！效果：

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

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

　　　　效果：

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

　　元素块的垂直居中：

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

　　垂直居中：

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

　　元素块的水平垂直居中：

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

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

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

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

.box { width: 500px; height: 400px; border: 1px solid;}

.content {width: 100px; height: 100px; background: #333;}

　　content的水平居中：

.box { width: 500px; height: 400px; border: 1px solid;}

.content {width: 100px; height: 100px; background: #333; margin: 0 auto;}

　　content的垂直居中：

.box { width: 500px; height: 400px; border: 1px solid; position: relative;}

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

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

　　content的水平垂直居中：　

.box { width: 500px; height: 400px; border: 1px solid; position: relative;}

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

文字的居中

　　文字的水平居中：

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

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

.box { width: 400px; height: 300px; border: 1px solid;}

.text {text-Align: center;}

　　文字的垂直居中：

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

.box { width: 400px; height: 300px; border: 1px solid;}

.text {line-height: 300px;}

　　文字的水平垂直居中：

.box { width: 400px; height: 300px; border: 1px solid; margin: 100px auto;}

.text {text-Align: center; line-height: 300px;}

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

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

　　最后附上html代码。

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

         <link type="text/css" rel="stylesheet" href="resource/css//temp.css" />

         <title>CSS各种居中</title>

         <link rel="icon" href="favicon.ico" type="images/x-icon" />

     </head>

     <body>

         <div class="box">

             <div class="content"></div>

             <h3 class="text">这是块中的一行文字！</h3>

         </div>

     </body>

 </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. Linq扩展最后遗留之SelectMany,Zip,SequenceEqual源码分析

    Linq扩展最后遗留之SelectMany,Zip,SequenceEqual源码分析 一: AsParallel [并行化查询] 这个函数的功效就是将计算结果多线程化.[并行计算] =>[多核 ...

  2. 相当郁闷的问题，TabHost选项卡标签图标始终不出现？

    在学习Android TabHost布局过程中,很多教程告诉我,这样来显示选项卡标签的图标和文字: TapSpec spec1 = tabHost.newTabSpec("tab 1&quo ...

  3. Python【运算符】

    本文介绍 1.Python运算符 运算符分类 运算符分为:算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算 一.算数运算:返回数字 假设变量a=10,b=20 运算符: + 相加a+ ...

  4. 项目前端打包工具从 NEJ 切换成 webpack

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...

  5. mvn install 报错Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2 错误: 找不到符号

    报错信息 在Eclipse中执行mvn install时,console端显示如下报错信息: [ERROR] Failed to execute goal org.apache.maven.plugi ...

  6. “全栈2019”Java第三十九章：构造函数、构造方法、构造器

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. each和foreach的区别

    each和foreach的区别是什么,我一直忘了还有这一茬,现在把这个总结一下,以备后用. 1.foreach是js的原生方法:each是jq的方法: 例如: var arr = ['mary','j ...

  8. kali linux之msf信息收集

    nmap扫描 Auxiliary 扫描模块 目前有557个扫描方式

  9. 大数据框架：Spark vs Hadoop vs Storm

    大数据时代,TB级甚至PB级数据已经超过单机尺度的数据处理,分布式处理系统应运而生. 知识预热 「专治不明觉厉」之“大数据”: 大数据生态圈及其技术栈: 关于大数据的四大特征(4V) 海量的数据规模( ...

  10. python requests 包 使用

    1: 发送带 cookie 的 请求 resp = requests.get(self.url_item_list_first_page, cookies=self.cookies) >> ...