元素块的居中

　　首先有这样一个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. 洛谷 P2146 [NOI2015]软件包管理器 （树链剖分模板题）

    题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...

  2. wc项目记录

    1.Github项目地址:https://github.com/3116004700/ruanjiangongcheng 2.预估时间见PSP表格. 3.解题思路描述: 在看到这个项目的时候我就想到了 ...

  3. MongoDB 主从复制 的设置

    今天我们主要讨论mongodb的部署技术. 我们知道sql server能够做到读写分离,双机热备份和集群部署,当然mongodb也能做到,实际应用中我们不希望数据库采用单点部署, 如果碰到数据库宕机 ...

  4. Winform Log4net 配置写不同文件

    以下配置了二种写文件,第一种根据日期写文件yyyyMMdd.txt,第二种是写固定文件login.txt. 1, 下载Log4net组件: http://logging.apache.org/log4 ...

  5. MySQL数据库（三）

    1. 创建表 create table student( id int unsigned not null auto_increment primary key, name varchar(8) no ...

  6. Winfrom 桌面弹窗拦截 关闭进程简易程序 源代码下载

    ***********************2019 2.7更新 v 2.0*************************************************** 程序 源代码 交互 ...

  7. less配置

    一.sublime text需要下载考拉,然后要 一直打开着: 1.编译工具用koala编译 下载地址:http://koala-app.com/index-zh.html 2.LESS中的注释: 可 ...

  8. “全栈2019”Java第八章：IntelliJ IDEA设置注释不显示在行首

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

  9. 洛谷P5158 【模板】多项式快速插值

    题面 传送门 前置芝士 拉格朗日插值,多项式多点求值 题解 首先根据拉格朗日插值公式我们可以暴力\(O(n^2)\)插出这个多项式,然而这显然是\(gg\)的 那么看看怎么优化,先来看一看拉格朗日插值 ...

  10. Ionic2的CLI的命令行

    http://blog.csdn.net/qq_33315185/article/details/68067747 在我们开发Ionic app的时候 CLI 是一个非常重要的工具.CLI包含了很多开 ...