基本结构

<!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. 夜话JAVA设计模式之代理模式（Proxy）

    代理模式定义:为另一个对象提供一个替身或者占位符以控制对这个对象的访问.---<Head First 设计模式> 代理模式换句话说就是给某一个对象创建一个代理对象,由这个代理对象控制对原对 ...

  2. 混合图(dizzy.pas/cpp/c)

    混合图(dizzy.pas/cpp/c) [题目描述] Hzwer神犇最近又征服了一个国家,然后接下来却也遇见了一个难题. Hzwer的国家有n个点,m条边,而作为国王,他十分喜欢游览自己的国家.他一 ...

  3. 如何使用VB编写Excel的COM组件

    1 新建工程中选择"外接程序",点击打开之后右侧的属性窗口即显示为MyAddIn工程.(注意如果你使用的是VB精简版的没有"外接程序"的选项,请下载完整版的) ...

  4. InnoDB: Error: Table &quot;mysql&quot;.&quot;innodb_table_stats&quot; not found.

    1,Mysqldump的时候报错例如以下: 2014-05-05 14:12:37 7f004a9a2700 InnoDB: Error: Table "mysql"." ...

  5. 设计四个线程，当中共两个线程每次对j添加1，另外两个线程每次对j降低1。循环100次，写出程序。

    package cn.usst.DataTest6; /** * 设计四个线程,当中共两个线程每次对j添加1,另外两个线程每次对j降低1.循环100次,写出程序. * @ * */ public cl ...

  6. 云上kafka和自建kafka对比

    说起Kafka,许多使用者对它是又爱又恨.Kafka是一种分布式的.基于发布/订阅的消息系统,其极致体验让人欲罢不能,但操心的运维.复杂的安全策略.可靠性易用性的缺失.算不上极致的性能发挥.并不丰富的 ...

  7. 自然常数 e 的理解与应用

    某彩票中奖率是百万分之一,则一个人买一百万张彩票仍不中奖的概率是: (1−1106)106≈1e e 往往出现在: 许多微小事件带来的总体变化 随机性和无穷多:

  8. JSP-Runoob：JSP 表达式语言

    ylbtech-JSP-Runoob:JSP 表达式语言 1.返回顶部 1. JSP 表达式语言 JSP表达式语言(EL)使得访问存储在JavaBean中的数据变得非常简单.JSP EL既可以用来创建 ...

  9. codeforces educational round 25

    A 出题人不给样例解释...具体程序 #include<bits/stdc++.h> using namespace std; int n; ]; int main() { scanf() ...

  10. CentOS7 iso封装语句

    mkisofs -o /srv/neutron-controller.iso -b isolinux/isolinux.bin -c isolinux/boot.cat -no-emul-boot - ...