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种.如有漏掉的,还会陆续的补充进来,算做是 ...
随机推荐
- Project导入错误 36D27C48
做后台系统导出Project时,部署到服务器提示:检索 COM 类工厂中 CLSID 为 {36D27C48-A1E8-11D3-BA55-00C04F72F325} 的组件失败,原因是出现以下错误: ...
- Drools等规则引擎技术对比分析
项目中需要设计开发一个规则引擎服务,于是调研了业界常用的规则引擎. 常见的规则引擎如下: Ilog JRules 是最有名的商用BRMS: Drools 是最活跃的开源规则引擎: Jess 是Clip ...
- 复习es6-let和const
1.声明变量的方法 es5 : var function es6 : var function let const class 2.let(const)与var 不同 let不能 ...
- ubuntu 建立加密分區及其安全刪除
加密分區1: sudo apt-get install cryptsetup2: 用“磁盤實用工具“,建立新的分區 或者 格式化現有分區,且勾選“加密底層設備“,按提示設定密碼3:同時選擇加密條件:i ...
- 局域网部署docker--从无到有创建自己的docker私有仓库
因为GFW的关系.国内用户在使用docker的时候,pull一个主要的镜像都拉下来.更不用说使用官方的index镜像了.差点放弃使用docker了,google了一圈.总算找到办法. 第一步:安装do ...
- VBS调用Windows API函数
Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog » 程序设计 » VBS调用Windows API函数 « 用VBS修改Windows用户密码 在VB中创建和使用 ...
- Android数据存储之IO
Android开发中免不了数据本地的存储,今天我们来说一说怎样利用IO流来进行数据存储. 这里我们通过模拟一个QQ登陆界面的小demo来实际操作IO流. 功能描写叙述:点击button能够保存用户输入 ...
- vue cli webstorm
贫富差距的产生 – 目光博客 http://eyehere.net/2017/1947/ https://github.com/vuejs/vue Vue 2.0 Hello World - JSFi ...
- 逆向工程之App脱壳
http://www.cnblogs.com/ludashi/p/5725743.html iOS逆向工程之App脱壳 本篇博客以微信为例,给微信脱壳."砸壳"在iOS逆向工程中是 ...
- Bing Maps进阶系列五：通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图
Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图 Bing Maps Silverlight Control虽然为我们提供了简洁.方便的开发模 ...