基本结构

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div class="parent">

        <div class="child">CSS居中方案</div>

    </div>

</body>

</html>

方案
1.父元素的text-align：center

.parent{

    text-align:center;

}

.child{

    margin:20px 100px;

    display: inline-block;

    border:1px solid black;

}

解释说明：text-align元素对块级元素和单元格（table-cell）起作用，其可使子元素居中显示。子元素添加display : inline-block ; 目的是为了是自身宽度自适应内容的宽度。

优点：兼容性好。在IE6、7下显示会有问题，可以通过{display：inline-block；zoom：1；}模拟display：inline-block。

缺点：子元素继承了父元素的text-align:center属性，会导致其内容居左显示，因而可以给子元素添加text-align属性使其正常显示它应该显示的地方。

2.margin: 0 auto;

.child{

margin:20px auto;

display: table;

border:1px solid black;

}

解释说明：display：table；属性使其表现上像是block元素，而在宽度上，可以随内容而改变（自适应）。

优点：样式简单，兼容性好

3.绝对定位+偏移50%;

.parent{position: relative;}

.child{

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    border: 1px solid black;

    }

解释说明：通过定位来实现居中，由于left：50%；会使子元素从父元素的50%处开始显示的，为了使子元素居中可以通过transform：translateX(-50%)；来使子元素向左移动相对自身的宽度50%，这用就实现居中了。

缺点：兼容性不好。transform属性的兼容性不好。

3.flex

.parent{

    display: flex;

    justify-content: center;

}

.child{

    border: 1px solid black;

}

解释说明：display：flex ;多列多栏布局。justify-content适用于：flex容器，设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

优点：只需要设置父元素的样式

缺点：兼容性差。

CSS居中布局方案的更多相关文章

  1. css 居中布局方案

    position(transform css3  有些浏览器不兼容) <article id="one"> <section id="section&q ...

  2. CSS居中布局总结【转】

    居中布局 <div class="parent"> <div class="child">demo</div> </d ...

  3. CSS居中布局总结

    居中布局 <div class="parent"> <div class="child">demo</div> </d ...

  4. 详解 CSS 居中布局技巧

    水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...

  5. 详解CSS居中布局技巧

    本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...

  6. CSS 居中布局

    来源:http://www.cnblogs.com/QianBoy/p/8539077.html 水平居中 1)使用inline-block+text-align 原理:先将子框由块级元素改变为行内块 ...

  7. CSS居中布局

    一:水平居中方案: 1.行内元素 设置 text-align:center 2.定宽块状元素 设置 左右 margin 值为 auto 3.不定宽块状元素 a:在元素外加入 table 标签(完整的, ...

  8. css居中布局的几种方式

    一.水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置widt ...

  9. 【基础】这15种CSS居中的方式，你都用过哪几种？

    简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...

随机推荐

  1. Hackerrank manasa-and-combinatorics(数学推导)

    题意:有n个字符A,2n个字符B,问你能用这3n个字母组成多少种字符串,使得组成的字符串所有前缀与后缀的B的数目都大于等于A的数目,对答案mod 99991 分析:类似卡特兰数 ans=总方案数-存在 ...

  2. [bzoj 1005][HNOI 2008]明明的烦恼（prufer数列+排列组合）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1005 分析: 首先prufer数列:http://baike.baidu.com/view/1 ...

  3. access-list/eigrp等 反掩码计算

    access-list/eigrp等 反掩码计算 原则:地址部分,相同的照写,不同的写"0"     反掩码部分,相同的写"0",不同的写"1&quo ...

  4. Shell细小问题汇总

    Shell细小问题汇总 本文原文出处: http://blog.csdn.net/bluishglc/article/details/44276607 严禁不论什么形式的转载,否则将托付CSDN官方维 ...

  5. 好纠结啊，JEECG 商业版本号和开源版本号有什么差别呢？

    好纠结啊.JEECG 商业版本号和开源版本号有什么差别呢? 2014-12-18 jeecg JEECG tp=webp" style="width: 698px;" a ...

  6. J2EE肌肉系统—四层模型

    J2EE是基于JAVA技术的一种标准.为什么会有这种标准呢? 主要是在企业级应用开发其中有一些需求.比如数据库连接,邮件服务.事件处理等,都是一些通用模块. 而这些模块假设由开发者来开发.势必添加开发 ...

  7. CF 445B(DZY Loves Chemistry-求连通块)

    B. DZY Loves Chemistry time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. hdu 1024 Max Sum Plus Plus (子段和最大问题)

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  9. Python&amp;MySQL

    环境:windows8+Python2.7+MySQL5.6 尝试过在C/C++中嵌入SQL语言,最终在其复杂"繁琐"环境配置中败下阵来,后来发现Python和MySQL比較eas ...

  10. 应用程序无法正常启动 0xc0000013 vs2013

    今天下午切换到Windows 优化代码,在debug 的时候一直出现这个问题,折腾了很久,发现原来是系统环境变量的问题,我之前装了双系统,讲原来win7 下的一块E盘删掉做了Linux 盘,而系统环境 ...