CSS居中布局方案
基本结构
<!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居中布局方案的更多相关文章
- css 居中布局方案
position(transform css3 有些浏览器不兼容) <article id="one"> <section id="section&q ...
- CSS居中布局总结【转】
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- CSS居中布局总结
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- 详解 CSS 居中布局技巧
水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...
- 详解CSS居中布局技巧
本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...
- CSS 居中布局
来源:http://www.cnblogs.com/QianBoy/p/8539077.html 水平居中 1)使用inline-block+text-align 原理:先将子框由块级元素改变为行内块 ...
- CSS居中布局
一:水平居中方案: 1.行内元素 设置 text-align:center 2.定宽块状元素 设置 左右 margin 值为 auto 3.不定宽块状元素 a:在元素外加入 table 标签(完整的, ...
- css居中布局的几种方式
一.水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置widt ...
- 【基础】这15种CSS居中的方式，你都用过哪几种？
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
随机推荐
- NIO基础学习——缓冲区
NIO是对I/O处理的进一步抽象,包含了I/O的基础概念.我是基于网上博友的博客和Ron Hitchens写的<JAVA NIO>来学习的. NIO的三大核心内容:缓冲区,通道,选择器. ...
- WINDOW 专家
http://www.cnblogs.com/shanyou/category/725986.html
- python_swift_project_middleware
1. 写openstack swift的middleware 首先要确定swift用的是哪个middleware文件. 比如healthcheck这个中间件,在机器上有很多同名文件如下, 这两行可能是 ...
- Linux内核project导论——前言
想要研究linux内核.使用linux内核,首先要知道linux内核能做到什么,提供了什么.我看过非常多刚開始学习的人一进入公司就開始使用linux内核开发内核模块.使用的不管是通信方式.内存接口还是 ...
- 此人牛b,学习榜样
http://liyangliang.me/about/ ------------------------------------------------------------2017年11月12日 ...
- hadoop-2.6.0 Unhealthy Nodes 问题
近期安装hadoop-2.6.0集群时,打开8088页面,查看集群信息,看到集群出现Unhealthy Nodes 的问题,点击该处.会展开Unhealthy Nodes 的情况,这时会看到Healt ...
- 行香子·过尽千山
<行香子·过尽千山> 文/天地尘埃2020 过尽千山.水瘦山寒. 思来路.地咽天玄. 千金散尽,欲补穹天. 但孟春暖,仲春炫.暮春喧. 三皇五帝,魏武挥鞭. 朴无欲.衡玉玑璿. 金生丽水, ...
- Android获取全部存储卡挂载路径
近期因项目需求.须要在存储卡查找文件,经測试发现部分手机挂载路径查找不到,这里分享一个有效的方法. /** * 获取全部存储卡挂载路径 * @return */ public static List& ...
- poj 3020 Antenna Placement（二分无向图 匈牙利）
Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6438 Accepted: 3176 ...
- Batch基本知识
一般情况下,每条命令占据一行: 当然也可以将多条命令用特定符号(如:&:.&&:.|.||等)分隔后写入同一行中: 还有的情况就是像if.for等较高级的命令则要占据几行.几十 ...