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种.如有漏掉的,还会陆续的补充进来,算做是 ...
随机推荐
- RDLC报表总结
这2天纠结的报表基本上已近完成大部分功能.现在总结一下自己近期的学习成果 首先制作微软RDLC报表由以下三部分构成:1.制作自己的DateSet集合(就是报表的数据集):2.制作自己的报表文件.rdl ...
- C#: 旋转图片到正确位置
当从iPhone等手机上传图片到服务器后,通常需要进行旋转处理,否则在进行图片压缩.缩放处理后会丢失正确的位置信息,导致显示的图片不处于正确的位置上. 处理的做法就是读取照片的Exif信息,并旋转到正 ...
- Lein: Exception in thread "Thread-3" java.net.ConnectException: Connection refused
leiningen Leiningen是你的主要工具, 它用于: 启动一个 REPL 下载+安装类库 运行你的程序 启动一个服务器, 运行你所写的webapps 安装 brew install lei ...
- 【EasyUi DataGrid】批量删除
DataGrid是我们做网页经常使用到的组件之中的一个,对它的操作也无非是增删改查操作.单条数据的增删改相对来说比較简单.添加.改动能够直接在DataGrid中进行,也能够用弹出框的形式把数据装载在文 ...
- 如何的退出无响应的 SSH 连接
~. 具体操作是Shift+-,然后松开按.. tips如果无效,可以先按下Enter,然后进行上面的操作.
- DVB-subtitle解析流程浅
DTV包含SUBTITLE和TTX. PMT中分别有不同的描述符对应,如下图的TTX descripter=0x56.语言ISO-639="fin" subtitle descri ...
- MSP430:管脚的第二功能选择
之前在使用PWM,AD时候用到过第二功能,不过都是copy没有注意过PXSEL究竟怎么设置,今天在设置晶振管脚时候遇到了麻烦,细致看了一下其实很简单,在SPEC的最后详细讲了每个管脚如何设置为其他功能 ...
- 异常java.lang.UnsupportedOperationException: The application must supply JDBC connections
转自:https://blog.csdn.net/q952420873/article/details/81355586 先上图 根据这个错误溯源 于是 我来到了数据库连接部分的代码 ,发现多了一个 ...
- 41. extjs--combobox下拉列表的triggerAction
转自:https://icrwen.iteye.com/blog/939247 一般combobox的store先load加载数据,然后combobox的mode设置为local,则不会每次下拉列表都 ...
- 删除".SVN"文件夹方法（转载）
转自:http://www.cnblogs.com/lr-ting/archive/2012/09/03/2666271.html 一.在linux下 删除这些目录是很简单的,命令如下 find . ...