元素块的居中

　　首先有这样一个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. ARM汇编程序中的伪指令

    转自http://blog.chinaunix.net/uid-13701930-id-336459.html 4.1 ARM汇编器所支持的伪指令 在ARM汇编语言程序里,有一些特殊指令助记符,这些助 ...

  2. Digester学习笔记(三)转载

    总觉得,Digester不仅仅能作配置文件解析,而且可以作得更多. 配置属性 Digester用来解析应用系统的配置文件,其本身也有很可配置的属性. 属性 描述 classLoader 指定类装载器( ...

  3. MlskincolorButton使用方法

    颜色设置 图标添加Png格式

  4. Android-ActivityManager 退出整个应用

    在做Android APP 过程中,有退出整个Project的功能,以下就是接受退出整个应用的操作: ActivityManager是用来管理记录每一个Activity,最后统一用来退出结束: pub ...

  5. onbeforeunload事件

    window.onbeforeunload=function(){ return "您正在编辑的博客尚未保存,确定要离开此页吗?"; }; 1.这个事件存在的意义就是防止用户不小心 ...

  6. eclipse 创建maven

    下载地址自行搜索关键字:“eclipse官网”即可,注意下版本,32bit or 64bit. maven插件以及svn等相关插件安装设置问题不在这里赘述,有时间的话会发布出来. 在这里说一下,第一. ...

  7. I-team 博客的 gitlab-runner 持续集成实践

    做为一个略微看过nodejs语法,但又不懂nodejs的攻城狮,搭建hexo环境很是麻烦,要考虑到FQ版本兼容等问题.于是乎,博主每换一个电脑,为了能继续发博客,都需要在新电脑上花一天时间重新搞一下 ...

  8. Delphi32位程序拷贝system32目录中文件解决方法！

    源码下载:http://download.csdn.net/detail/sunylat/9740352 unit Unit1; interface uses Winapi.Windows, Wina ...

  9. toggleClass，toggle切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. UItextfield各个通知和回调的顺序

    成为第一响应者之前,调用delegate的textFieldShouldBeginEditing(_:)方法 成为第一响应者 发送通知UIKeyboardWillShow和UIKeyboardDidS ...