基本结构

<!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. spring项目启动需要的几个注解

    1.@ComponentScan注解,spring context包下,可以理解嘛,扫描srping bean放在ioc容器中的. ApplicationContext是接口,就是IOC容器嘛,也在这 ...

  2. swift 2.0 语法 函数

    //: Playground - noun: a place where people can play import UIKit /*: 函数 * 格式 func 函数名称(形参名称1: 形参类型, ...

  3. Boost Replaceable by C++11 language features or libraries

    Replaceable by C++11 language features or libraries Foreach → Range-based for Functional/Forward → P ...

  4. 从头认识Spring-1.9 内部类注入Bean

    这一章节我们来讨论一下内部类注入Bean. 1.domain 蛋糕类:(跟前一章节的一样) package com.raylee.my_new_spring.my_new_spring.ch01.to ...

  5. ClipboardEvent.clipboardData

    ClipboardEvent.clipboardData https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboa ...

  6. ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）

    前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事 ...

  7. P3959 宝藏 状压dp

    之前写了一份此题关于模拟退火的方法,现在来补充一下状压dp的方法. 其实直接在dfs中状压比较好想,而且实现也很简单,但是网上有人说这种方法是错的...并不知道哪错了,但是就不写了,找了一个正解. 正 ...

  8. Dice (HDU 4652)

    题面: m 面骰子,求1. 出现n个连续相同的停止 ;2. 出现n个连续不同的停止的期望次数.(n, m ≤ 10^6 ) 解析: 当然要先列式子啦. 用f[i](g[i])表示出现i个连续相同(不相 ...

  9. 8.4 IP地址的划分及子网划分

    都是比较灵活的一些计算题.只要掌握了其中的规则,还是比较容易解题的.在了解子网的划分如何进行之前呢,一定要弄清楚一个概念:子网掩码.这是弄清楚如何进行子网划分的一个关键. IP地址是四段二进制码拼合而 ...

  10. K8S之利用Label控制Pod位置

    首先介绍下什么是Label? Label是Kubernetes系列中一个核心概念.是一组绑定到K8s资源对象上的key/value对.同一个对象的labels属性的key必须唯一.label可以附加到 ...