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

    Description In this problem, you have to analyze a particular sorting algorithm. The algorithm proce ...

  2. VS2015开发的Office Addin部署，安装时报错：无法解析属性“type”的值。

    用VS2012开发的Outlook插件,在多数情况下安装正常,但是在某些机器上,安装时出现以下错误: 打开VSTOInstaller.exe.config文件查看,其中内容是: <?xml ve ...

  3. activiti入门3排他网关,并行网管,包含网关,事件网关（转）

    网关用来控制流程的流向 网关可以消费也可以生成token. 网关显示成菱形图形,内部有有一个小图标. 图标表示网关的类型. 基本分支 首先 利用 流程变量  写个带有分支的一个基本流程 流程图: 部署 ...

  4. node.js基础模块http、网页分析工具cherrio实现爬虫

    node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言      说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...

  5. Lowest Common Ancestor in Binary Tree

    The problem: Given node P and node Q in a binary tree T. Find out the lowest common ancestor of the ...

  6. AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 《转》

    AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 测试代码: 测试代码如下: <%@ Page Language="C#" AutoE ...

  7. 对MMU段式转换的理解

    本文将详细介绍MMU段式转换的过程,并在文末附上一篇讲MMU比较详细的文章.具体什么是MMU,什么时段是转换就不在本文讲了,直接戳文末的链接. 首先,进行段式转换的条件.我们要拥有一个虚拟地址,还有一 ...

  8. SRM 597

    我果然是题短了就能做得好- -.Div 2的三道题都短,于是迅速的过掉了250和500,rating涨了150^ ^. Div 2 250pt 题意:给一个vector<int> A,对其 ...

  9. Python开发—Ajax系列

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  10. GitHub 的分支创建与合并

    一个Git仓库可以维护很多开发分支.现在我们来创建一个新的叫"experimental"的分支: $ git branch experimental 如果你运行下面这条命令: $ ...