CSS 居中

一、水平或垂直居中

1. 单行内容垂直居中

/*height = line-height*/
.center{
    height: 4em;
    line-height: 4em;
    overflow: hidden;      /*保护布局,非必须*/
}

支持:所有块级、内联元素、所有浏览器

缺点:只能显示一行

2. div水平居中

<!--html代码-->
<div class="center">div居中了</div>
body{ text-align:center} 
.center{ 
    margin:0 auto;   /*main*/
    width:400px; 
    height:100px; 
    border:1px solid #F00
} 

3. float

给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现

二、水平+垂直居中

1. 非固定高度居中

.middle{
  position:absolute;
  top:10px;
  bottom:10px;  
}

支持:所有块级、内联元素、所有浏览器 缺点:容器不能固定高度

2. 利用表格

.middle{
    display: table-cell;
    height: 300px;
    vertical-align: middle;
}

缺点:IE无效

3. margin负值

.middle {
        width: 400px;
        height: 200px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -200px; /*   width/2   */
        margin-top: -100px; /*   height/2   */
}

支持:ie各个版本

缺点:非响应式,宽高固定,需要为padding预留空间或用box-sizing:border-box

4. 完全居中

<!DOCTYPE html>
<html>
<head>
    <title>text-align</title>
    <style type="text/css" media="screen">
    body {
        text-align: center
    }
    .middle {
        background: red;
        bottom: 0;
        height: 100px;
        left: 0;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
    }
    </style>
</head>

<body>
    <div class="middle">center</div>
</body>

</html>

5. fixed(可视区域内居中)

.middle {
  position: fixed;
  z-index: 999;  /*设置较大的z-index居于其他元素上方   最好在外层容器设置position:relative */
}

6. transform

.middle { 
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

缺点: 不支持IE8

7. inline-block

.middle{
    display: inline-block;
     vertical-align: middle;
   text-align: center;
}

8. Flex方法

<div class="container">
    <!--容器内的元素将会居中-->
    <img src="a.jpg">
</div>
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*考虑兼容性 */
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

1.设置container的display的类型为flex,激活为flexbox模式。

2.justify-content定义水平方向的元素位置

3.align-items定义垂直方向的元素位置

支持:任意宽高

不支持IE8-9

三、图片居中

1. align

<div align="center"><img src="a.jpg" /></div> 

2. text-align

<div style="text-align:center"><img src="a.jpg" /></div> 

四、对照表

所用样式

支持的浏览器

是否 响应式

内容溢出后的样式

resize:both

高度可变

主要缺陷

Absolute

现代浏览器&IE8+

会导致容器溢出

是*

‘可变高度’的特性不能跨浏览器

负margin值

所有

带滚动条

大小改变后不再居中

不具有响应式特性,margin值必须经过手工计算

Transform

现代浏览器&IE9+

会导致容器溢出

妨碍渲染

Table-Cell

现代浏览器&IE8+

撑开容器

会加上多余的标记

Inline-Block

现代浏览器&IE8+&IE7*

撑开容器

需要使用容器包裹和hack式的样式

Flexbox

现代浏览器&IE10+

会导致容器溢出

需要使用容器包裹和厂商前缀(vendor prefix)

持续更新······

如有建议或其他实现方法,欢迎留言交流~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

4573
来自专栏hightopo

原 快速创建 HTML5 Canvas 电

2322
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

2310
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

3815
来自专栏程序员互动联盟

【专业技术】CSS作用及用法

层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...

3647
来自专栏有趣的django

20.DOM

定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getEl...

3495
来自专栏一“技”之长

Java开发GUI之单复选框 原

    单复选框在处理一些用户选项时十分方便。在Java的GUI体系中,复选框使用Checkbox类来创建,单选框实际上是将多个复选框结合成为组,同一组的复选框...

812
来自专栏deepcc

jQuery阻止冒泡和HTML默认操作

3955
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

1294
来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

3675

扫码关注云+社区

领取腾讯云代金券