元素块的居中

　　首先有这样一个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. 关于super关键字与继承

    super它只是一个限定词,当用super引用时,它也是引用当前对象本身,只是super只是限定了访问当前对象从父类那里继承得到成员变量或方法. import java.util.Date; publ ...

  2. 19、Semantic-UI之图片的动画效果

      在Semantic-UI中定义了很多图片动画效果,可以直接使用. 示例:定义图片动画 <!DOCTYPE html> <html lang="en"> ...

  3. First App on Phonegap | Cordova

    Phonegap简介 PhoneGap是一能够让你用普通的web技术编写出能够轻松调用api接口和进入应用商店的 html5应用开发平台,是唯一支持7个平台的开源移动框架. 优势: 1.兼容性:多平台 ...

  4. leetcode 加一

    给定一个非负整数组成的非空数组,在该数的基础上加一,返回一个新的数组. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 1: ...

  5. redis详细说明

    # By default Redis does not run as a daemon. Use 'yes' if you need it.# Note that Redis will write a ...

  6. [Cocos2d-x for WP8学习笔记] 一些基本概念,建立自己的启动界面

    流程控制:场景是相对不变的游戏元素集合,游戏在场景间的切换就是流程控制. 场景.层和精灵:它们是不同层次的游戏元素.通常,场景包含层,层包含精灵,场景与层是其他游戏元素的容器,而精灵是展示给玩家的图形 ...

  7. Windows 2012 R2版本下部署IIS网站

    Windows 2012 R2是一个比较稳定的服务器版本,本文分享一篇在Windows 2012 R2版本下搭建IIS项目的操作流程. 1. 安装IIS Web服务器 打开远程桌面->控制面板- ...

  8. vector在一个循环里同时删除插入

    vector<int> a; a.push_back(10); a.push_back(20); a.push_back(30); a.push_back(40); a.push_back ...

  9. IO模型《七》selectors模块

    一 了解select,poll,epoll IO复用:为了解释这个名词,首先来理解下复用这个概念,复用也就是共用的意思,这样理解还是有些抽象, 为此,咱们来理解下复用在通信领域的使用,在通信领域中为了 ...

  10. bzoj1875 HH去散步

    题目链接 一开始特别天真, $Folyd$传递闭包写了一下过了样例就交上去了 然后$gg$ $qwq$ 想了想$……$ 还要写一点东西 最后统计答案的时候有细节要注意 /*************** ...