CSS之各种居中
本博客讨论居中情况设定为 总宽度不定,内容宽度不定 的情况。(改变大小时,仍然居中)。
特别说明:在元素设置 position:absolute;
来设置居中效果时,除去博客下介绍的css3方法外,还可以使用负的 margin
来居中,这样解决了兼容性的问题,但是只适用于宽高已知的情况(因为负的偏移量为元素宽高的一半)。宽高改变时,不再是居中效果。
在这些布局中的子元素,因为其属性设置,都默认为内容宽度。
本博客所有居中的例子,只讨论css的实现,html代码统一如下:
<div class="parent">
<div class="child">demo</div>
</div>
1. 水平居中
1.1 inline-block
配合 text-align
.parent{
text-align: center;
}
.child{
display: inline-block;
}
优点:兼容性非常好,只需要添加只需要在子元素的css中添加 *display:inline
和 *zoom:1
就可兼容到IE6、7;缺点:内部文字也会水平居中,需消除影响。
1.2 table
配合 margin
.child{
display:table;
margin: 0 auto;
}
优点:设置特别简单,只需对子元素进行设置,支持IE8+,需支持IE6,7时,可更换子元素为表格结构。
1.3 abasolute
配合 transform
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
transform: translateX(-50%);
}
优点:居中元素不对其他元素产生影响。缺点:CSS3新属性支持IE9+,低版本浏览器不支持。
2. 垂直居中
2.1 table-cell
配合 vertical-align
.parent{
display: table-cell;
vertical-align:middle;
}
优点:设置简单,只需对父元素进行设置,兼容到IE8+,需兼容地版本浏览器时,可更换 div
为表格结构。
2.2 absolute
配合 tranform
.parent{
position:relative;
}
.child{
position:absolute;
top: 50%;
transform: translateY(-50%);
}
优点:居中元素不对其他元素产生影响。缺点:CSS3新属性支持IE9+,低版本浏览器不支持。
3. 水平+垂直居中
3.1 inline-block
配合 text-align
加上 table-cell
配合vertical-align
.parent{
display: table-cell;
vertical-align:middle;
text-align:center;
}
.child{
display: inline-block;
}
优点:综合前两中方法,兼容性好!支持IE8+,低版本浏览器也好兼容。缺点:设置较为复杂。
3.2 absolute
配合 transform
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
优点:居中元素不对其他元素产生影响。缺点:CSS3新属性支持IE9+,低版本浏览器不支持。
4. 全能的 flex
css3新增布局属性,布局简单,强大,性能略差,只支持IE10+,在移动端使用较多。
4.1 水平居中
/*当父元素设置display: flex;时,子元素为flex-item,默认为内容宽度。*/
.parent{
display: flex;
justify-content: center;
}
/* 在设置子元素为margin: 0 auto;时,可删除父元素的justify-content: center;同样可以达到居中效果*/
/* .child{
margin: 0 auto;
}*/
4.2 垂直居中
.parent{
display: flex;
align-items: center;
}
4.3 水平垂直居中
.parent{
display: flex;
justify-content: center;
align-items: center;
}
/*如同flex布局的第一部分一样这里也可以对子元素进行下面的设置:同时删除上面的除去display外的其他属性*/
/* .child{
margin:auto;
} */
CSS之各种居中的更多相关文章
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结 第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
- CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css布局---各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- css 浮动元素居中
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- css设置图片居中、居左、居右
CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...
- css布局之居中
CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...
- css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
随机推荐
- no matching function for call to 'make_pair(std::string&, size_t&)'
rtl->push_back(make_pair<string, int>(str, pos)); 在redhat6上编译无问题,在centos7上编译出现错误: no matchi ...
- 31、Arrays数组排序(续)——自定义排序
自定义的类要按照一定的方式进行排序,比如一个Person类要按照年龄进行从小到大排序,比如一个Student类要按照成绩进行由高到低排序. 这里我们采用两种方式,一种是使用Comparable接口:让 ...
- javascript 的继承实例
shape.prototype = { getEdge:function(){ return this.edge; }, getArea:function(){ return this.a*this. ...
- js同域名下不同文件下使用coookie
//写cookies function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.get ...
- AFLW如何获取你想要的21点人脸关键点数据
目前人脸检测和人脸的关键点的数据库根据关键点个数:5,20,21,29,68等.https://blog.csdn.net/XZZPPP/article/details/74939823该网页详细列出 ...
- Python 列表 min() 方法
描述 Python 列表 min() 方法返回列表元素中的最小值. 语法 min() 方法语法: min(L) 参数 L -- 要返回最小值的列表. 返回值 返回列表元素中的最小值. 实例 以下实例展 ...
- [Jobdu] 题目1493:公约数
题目描述: 给定两个正整数a,b(1<=a,b<=100000000),计算他们公约数的个数.如给定正整数8和16,他们的公约数有:1.2.4.8,所以输出为4. 输入: 输入包含多组测试 ...
- Atitit.注解解析(1)---------词法分析 attilax总结 java .net
Atitit.注解解析(1)---------词法分析 attilax总结 java .net 1. 应用场景:::因为要使用ui化的注解 1 2. 流程如下::: 词法分析(生成token流) & ...
- JQM事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- layui的点击table行选中复选框
$(document).on("click",".layui-table-body table.layui-table tbody tr",function() ...