基本结构

<!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. 洛谷—— P3811 【模板】乘法逆元

    https://www.luogu.org/problem/show?pid=3811 题目背景 这是一道模板题 题目描述 给定n,p求1~n中所有整数在模p意义下的乘法逆元. 输入输出格式 输入格式 ...

  2. SiteMesh2-sitemesh.xml的ParameterDecoratorMapper映射器的用法

    继续使用上一章http://www.cnblogs.com/EasonJim/p/7086916.html的例子,改造成使用ParameterDecoratorMapper映射器的方法,这个映射器不需 ...

  3. Windows下Redis的安装与部署

    1.下载地址:https://github.com/MSOpenTech/redis/releases 2.下载zip的包,下载后放到需要安装的目录进行解压操作,列如:F:\Redis\Redis-x ...

  4. Reduce 任务的完整数据流

  5. Android:Unable to resolve target ‘android-8’问题解决

    在学习过程中,下载别人写过的代码,导入到eclipse,报错: Unable to resolve target 'android-8' 问题是项目版本号问题. 解决方法例如以下: 右击项目:Prop ...

  6. 为什么使用do{}while(0)?

    近期学习Cocos2d-x,看到不少使用do{}while(0)的宏定义,如: #define CC_SAFE_DELETE(p) do { delete (p); (p) = nullptr; } ...

  7. 我的Android进阶之旅------&gt;Android的ListView数据更新后，怎样使最新的条目能够自己主动滚动到可视范围内？

    在ListView的layout配置中加入 android:transcriptMode="alwaysScroll" <ListView android:id=" ...

  8. 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步

    深入理解MVC   MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...

  9. 机器学习A

    订阅地址 :  http://blog.csdn.net/lizhe_dashuju/rss/list

  10. Execution Order In a Test Plan

    1.Config Element 2.Pre  Processors 3.Timer 4.Sampler 5.Post Processors 6.Assertions 7.Listener