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种.如有漏掉的,还会陆续的补充进来,算做是 ...
随机推荐
- Ubuntu 16.04开机进入命令行（tty1）+分辨率调节+字体颜色设置+中文乱码解决（解决虚拟终端Ctrl+Alt+F1分辨率太大）
一.开机进入命令行模式(tty1) sudo vim /etc/default/grub 把GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash”改成GRUB_CMDLIN ...
- 网络请求之GET、POST请求
网络请求-GET请求: 1,NSURL: 请求地址. 2,NSURLRequest :一个NSURLRequest对象就代表一个请求.它包括的信息有: 1)一个NSURL对象 GET请求,不须要写请求 ...
- Linux下使用Vi是方向键变乱码 退格键不能使用的解决方法
在Linux下编辑一些文件.这就涉及到了vi这个编辑器了.在Linux下,初始使用vi的时候有点问题.就是在编辑模式下使用方向键的时候,并不会使光标移动,而是在命令行中出现[A [B [C [D之类的 ...
- 从打击App刷榜看苹果的底线
这两天苹果打击App刷榜者的消息刷屏了,从腾讯科技.appying多个媒体渠道看到,<安居客>.<友秘>.<微在>.<秦时明月2>.<悟空与貂蝉& ...
- inline-block元素因基线对齐而造成上浮的问题
假设我需要实现将三个块级元素并排对齐的如下效果: 代码如下: <!DOCTYPE html> <html lang="en-US"> <head> ...
- vim随想笔记(1)
本人是一个vim的狂热粉丝,越是使用vim,越是认为琐碎内容太多,时不时地出现一些自己没有见过的使用方法.命令. 因此准备在博客上用空余时间在阅读<学习vi和vim编辑器>的基础上总结一下 ...
- Yii中使用RBAC全然指南
本人小菜鸟一仅仅,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群. 希望光临本博客的人能够进来交流. ...
- install yael on the ubuntu 12.04
1. bits/predefs.h no such file or directory ??? sudo apt-get install gcc-multilib 2. sudo gedit /et ...
- regEx in Groovy
// 使用正则 得到非纯XML文件中的信息 // Response 经常得到的不是纯XML def pattern = ~/(<NewDataSet>).*(<\/NewDataSe ...
- JSP-Runoob：JSP 链接数据库
ylbtech-JSP-Runoob:JSP 链接数据库 1.返回顶部 1. JSP 连接数据库 本教程假定您已经了解了 JDBC 应用程序的工作方式.在您开始学习 JSP 数据库访问之前,请访问 J ...