水平居中是常用的几种布局方式之一。主要分为行内元素的居中，块元素的居中。块元素的居中还分为固定宽度的居中，不定宽度的居中。行内元素的居中，使用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. PlatformTransactionManager

    Spring Boot 使用事务非常简单,首先使用注解 @EnableTransactionManagement 开启事务支持后,然后在访问数据库的Service方法上添加注解 @Transactio ...

  2. 1031. Hello World for U (20) PAT

    题目:http://pat.zju.edu.cn/contests/pat-a-practise/1031 分析: 简单题,调整数组的输出次序就可以了. 输入数组长度为len.n1 = n3 = (l ...

  3. Unity 使用BMFont制作字体

    参考链接:http://blog.csdn.net/huang9012/article/details/32333913,作者:CSDN huang9012 NGUI版本:3.6.5 要自己制作字体, ...

  4. AlgorithmsI PA2: Randomized Queues and Deques Deque

    本次作业考察利用array 或者linked list 实现规定时间复杂度的queue 和stack, 不能使用java 自带的stack 和queue. 目的是让我们掌握自己设计的函数的复杂度. D ...

  5. POJ2002 Squares(枚举)

    题目链接. 分析: 普遍的做法是:先枚举两个点,通过数学公式得到另外2个点,使得这四个点能够成正方形.然后检查散点集中是否存在计算出来的那两个点,若存在,说明有一个正方形. 但这种做法会使同一个正方形 ...

  6. 动态规划(状态压缩)：BZOJ 2621 [Usaco2012 Mar]Cows in a Skyscraper

      2621: [Usaco2012 Mar]Cows in a Skyscraper Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 303  Sol ...

  7. 综合查询员工和datetime.now和datetime.today区别

    一:综合查询图 二:EmployeeListWindow.cs代码 using System; using System.Collections.Generic; using System.Compo ...

  8. 关于sed中的Pattern Space和Hold Space的随笔

    首先是一部分概念和示例,这部分转自:http://coolshell.cn/articles/9104.html Pattern Space 第零个是关于-n参数的,大家也许没看懂,没关系,我们来看一 ...

  9. HDOJ(HDU) 2153 仙人球的残影(谜一样的题、、、)

    Problem Description 在美丽的HDU,有一名大三的同学,他的速度是众所周知的,跑100米仅仅用了2秒47,在他跑步过程中会留下残影的哎,大家很想知道他是谁了吧,他叫仙人球,既然名字这 ...

  10. GitHub上传不了的解决 ssh: connect to host github.com port 22: Bad file number git did not exit cleanly (exit code 128)

    问题情况 本来一直用的是github的客户端,结果现在上传的时候出问题了,去网站上看,新项目已经创建,但是代码却怎么都上传不上去.于是只好用命令行的方式解决. Tortoisegit上是这样说的: g ...