水平居中是常用的几种布局方式之一。主要分为行内元素的居中，块元素的居中。块元素的居中还分为固定宽度的居中，不定宽度的居中。行内元素的居中，使用text-align:center就可以实现，已知宽度的块元素的居中，使用绝对定位以及设置margin为宽的一半的负值就可以实现。但是不定宽度的居中比起上面两种更常用，也更复杂，我们常常需要在分页的页码展示等地方用到不定宽居中，使用起来更方便，下面来研究下常用的几种块元素的水平居中。
 
1.标签嵌套偏移
实现原理：
          联想到固定宽度的居中的实现：先偏移到屏幕中央，在设置其margin方向偏移宽的一半。那么能不能想到一种方法，借用这种思路，先偏移50%到屏幕的右半部分，然后在反方向偏移回来？实现起来比较困难的点是不知道这个宽度是多少。又想到只要让其父宽度和子宽度相等，然后用百分数就可以解决。那么怎么让其父宽度和字宽度一样呢？巧借float具有的包裹性：父元素如果漂浮了，并且没有设置宽高，那么将尽量包裹子元素。
 
实现代码：
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>不定宽度水平居中</title>

    <style>

        body{

            background-color: #e5da31;

        }

        .container{

            position: absolute;   /*脱离文档流，其宽度将由子元素的宽度决定*/

            left:50%;

        }

        .content{

            position: absolute;

            left:-50%;

            background-color: #2ecc71;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="content">标签嵌套</div>

</div>

</body>

</html>
实现效果：
优点与缺点：
缺点很明显，需要自己写和文档内容无关的标签，多打了那么几行代码兼容性良好，在ie6+浏览器上查看没有问题
 
2.flex-box布局
实现原理：
先定义一个flex容器，然后设置其内容对齐方式为中间对齐
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>不定宽度水平居中</title>

    <style>

        body {

            background-color: #e5da31;

        }

        .container {

            display: flex;  /*定义一个flex容器*/

            justify-content: center;  /*定义容器的空间没有被全部占用时，内容的对其方式*/

        }

        .content{

            background-color: #2ecc71;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="content">标签嵌套</div>

</div>

</body>

</html>
实现效果：
 
优缺点分析：
实现起来最简单，但是呢，因为flex的兼容性不好，当要兼容低阶浏览器时慎重使用。
 
3.内联布局
 
实现原理：
 text-align:center可以让行内元素水平居中，如果改变块元素为行内元素，在使用text-align就可以实现水平居中。
实现代码：
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>不定宽度水平居中</title>

    <style>

        body{

            background-color: #e5da31;

        }

        .container{

          text-align:center;

        }

        .content{

        display: inline;

            background-color: #2ecc71;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="content">标签嵌套</div>

</div>

</body>

</html>
实现效果：
 
 
优缺点分析：
用本来是修饰文字对齐方式的text-align来实现水平居中总感觉有点别扭，这块外面的container也先多余，但是为了不影响body内其他元素的局部，暂且如此。另外兼容性不错，在ie6+可以正常显示。

css水平居中的小小探讨的更多相关文章

  1. css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

  2. CSS水平居中

    三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...

  3. css水平居中，竖直居中技巧（二）

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  4. css水平居中，竖直居中技巧（一）

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  5. css水平居中的各种方法

    说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...

  6. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  7. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  8. CSS 水平居中

    一.水平居中:行内元素解决方案 居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...

  9. css水平居中和垂直居中

    水平居中:内联元素:text-align:center;相对于父级居中显示块级元素:margin:0 auto;但是需要同时width,否则无法看到效果多个块级元素居中:在此想要探讨一下display ...

随机推荐

  1. Tiling（递推+大数）

    Description In how many ways can you tile a 2xn rectangle by 2x1 or 2x2 tiles? Here is a sample tili ...

  2. 趁有空，再了解一下GROOVY中关于类的通例

    简单的,浅浅的看一下. 想起了RUBY里覆盖类的方法... 在GROOVY里也同样提到了,比如TOSTRING... (其实,在我以前的经验中,从未用过这些东东..:)) 这样用了PACKAGE,显得 ...

  3. Unity 小地图制作插件NJG MiniMap的简单使用

    unity版本:4.5.1 NJG MiniMap版本:1.5 参考链接:http://blog.csdn.net/wuming22222/article/details/37526659,作者:CS ...

  4. linux setsockopt

     linux setsockopt Socket描述符选项[SOL_SOCKET] #include <sys/socket.h> int setsockopt( int socket, ...

  5. Struts2再爆远程代码执行漏洞

    Struts又爆远程代码执行漏洞!在这次的漏洞中,攻击者可以通过操纵参数远程执行恶意代码.Struts 2.3.15.1之前的版本,参数action的值redirect以及redirectAction ...

  6. 奔跑的xiaodao

    http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=2086 很明显的一个二分题目.因为要 ...

  7. Android USB安全调试

    Android 4.2.2 引入了USB安全调试方面的内容,当启用安全调试的时候,只有被用户认证过的主机才可以通过Android SDK自带的ADB工具经由USB连接来访问设备的内部构件. 下面以an ...

  8. JAVA的可变类与不可变类

    转自: http://www.blogjava.net/hilor/articles/150610.html 可变类和不可变类(Mutable and Immutable Objects)的初步定义: ...

  9. C#中反射接受的字符串需要满足的Backus-Naur Form语法

    MSDN的Specifying Fully Qualified Type Names指明了C#中反射接受的字符串需要满足如下的Backus-Naur Form语法. BNF grammar of fu ...

  10. Rocketmq整体分析

    之前本人在实际的生产环境中,使用过activemq和rabbitmq消息队列,在使用过程中出现一些难以解决的问题,本文通过产品选型.网络架构和核心特性分析了rocketmq的优势和特性. 产品选型 我 ...