本博客讨论居中情况设定为 总宽度不定,内容宽度不定 的情况。(改变大小时,仍然居中)。

特别说明:在元素设置 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之各种居中的更多相关文章

  1. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  2. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  3. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. css布局---各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  5. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  7. css布局之居中

    CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...

  8. css中的居中问题

    前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...

  9. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  10. css图片居中,通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

随机推荐

  1. 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 ...

  2. 31、Arrays数组排序(续)——自定义排序

    自定义的类要按照一定的方式进行排序,比如一个Person类要按照年龄进行从小到大排序,比如一个Student类要按照成绩进行由高到低排序. 这里我们采用两种方式,一种是使用Comparable接口:让 ...

  3. javascript 的继承实例

    shape.prototype = { getEdge:function(){ return this.edge; }, getArea:function(){ return this.a*this. ...

  4. js同域名下不同文件下使用coookie

    //写cookies function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.get ...

  5. AFLW如何获取你想要的21点人脸关键点数据

    目前人脸检测和人脸的关键点的数据库根据关键点个数:5,20,21,29,68等.https://blog.csdn.net/XZZPPP/article/details/74939823该网页详细列出 ...

  6. Python 列表 min() 方法

    描述 Python 列表 min() 方法返回列表元素中的最小值. 语法 min() 方法语法: min(L) 参数 L -- 要返回最小值的列表. 返回值 返回列表元素中的最小值. 实例 以下实例展 ...

  7. [Jobdu] 题目1493:公约数

    题目描述: 给定两个正整数a,b(1<=a,b<=100000000),计算他们公约数的个数.如给定正整数8和16,他们的公约数有:1.2.4.8,所以输出为4. 输入: 输入包含多组测试 ...

  8. Atitit.注解解析(1)---------词法分析 attilax总结 java .net

    Atitit.注解解析(1)---------词法分析 attilax总结  java .net 1. 应用场景:::因为要使用ui化的注解 1 2. 流程如下::: 词法分析(生成token流) & ...

  9. JQM事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  10. layui的点击table行选中复选框

    $(document).on("click",".layui-table-body table.layui-table tbody tr",function() ...