水平居中是常用的几种布局方式之一。主要分为行内元素的居中，块元素的居中。块元素的居中还分为固定宽度的居中，不定宽度的居中。行内元素的居中，使用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. SQL Server查看所有表大小，所占空间

    create table #Data(name varchar(100),row varchar(100),reserved varchar(100),data varchar(100),index_ ...

  2. c++ explicit

    C++ explicit关键字用来修饰类的构造函数,表明该构造函数是显式的,既然有"显式"那么必然就有"隐式",那么什么是显示而什么又是隐式的呢? 如果c++类 ...

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

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

  4. HDU4681 String（dp)

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

  5. Codeforces Round #Pi (Div. 2) ABCDEF已更新

    A. Lineland Mail time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...

  6. Linux Kernel ‘skbuff.c’本地拒绝服务漏洞

    漏洞名称: Linux Kernel ‘skbuff.c’本地拒绝服务漏洞 CNNVD编号: CNNVD-201307-498 发布时间: 2013-07-24 更新时间: 2013-07-24 危害 ...

  7. jquery禁用右键、文本选择功能、刷新

    //禁用右键.文本选择功能.刷新 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“select ...

  8. page-object使用（1）

    创建你的page 你必须做的第一件事情是创建你的page,这是一些包含了PageObject模块的简单的ruby类,请不要创建你自己的initialize方法,因为已经有一个存在而且不能被覆盖.如果你 ...

  9. vijosP1603迷宫

    vijosP1603迷宫 链接:https://vijos.org/p/1603 [思路] 参考Matrix67的文章: [代码] #include<cstdio> #include< ...

  10. TXT四则运算计算器

    基本思想:使用getline函数从TXT文件中依次读出中缀表达式,将其转为后缀表达式后计算结果,并与用户结果比对. 整数.分数.小数的处理:将小数和整数都视为默认分母为1的分数.建立分数类,在中缀转换 ...