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

    注意,请不要被我误导,我没有看其他资料,这是我自己分析的,有些可能是不对的 "DestroyJavaVM" prio=6 tid=0x00316800 nid=0x448 wait ...

  2. Spring MVC学习总结。

    公司项目用的Spring MVC.顺便学习学习. 其实框架并没有想象中的复杂.尤其对于初学者,总觉得SSH是一些很复杂的东西似的.其实对初学者来说能够用这些框架就足够了.在公司里也是,基本功能会用了就 ...

  3. [置顶] 2014年八大最热门IT技能

    根据Computerworld网站组织的年度预测调查,众多IT专业人士在2014年所面临的整体就业形势与今年基本持平——今年有33%的企业有计划增加IT部门的员工数量,而未来一年则有32%的企业有此打 ...

  4. 【HDOJ】2369 Broken Keyboard

    字符串. #include <cstdio> #include <cstring> ]; ]; int main() { int n, len; int i, j, k, tm ...

  5. HDU4681 String（dp)

    题目链接. #include <iostream> #include <cstdio> #include <cstring> #include <cstdli ...

  6. hdu-3487-Play with Chain-(splay 区间翻转，切割，插入)

    题意: 区间翻转,切割,插入 // File Name: ACM/HDU/3487.cpp // Author: Zlbing // Created Time: 2013年08月10日 星期六 21时 ...

  7. select的使用（一）

    单表操作 select Name,Major,InDate from T_Employee as 计算结果 select Name as 姓名,Major,InDate from T_Employee ...

  8. First Bad Version——LeetCode

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  9. C/C++常用算法【C语言顺序查找（随机数）】【1】

    这是我学习唐峻,李淳的<C/C++常用算法第一天> 1.8.1. 查找数字: 程序随机生成一个拥有20个整数数据的数组,然后输入要查找的数据.接着,可以采用醉简单的逐个对比的方法进行查找, ...

  10. [Locked] Sparse Matrix Multiplication

    Given two sparse matrices A and B, return the result of AB. You may assume that A's column number is ...