首页 > 代码库 > CSS 居中

CSS 居中

2024-10-09 22:29:40   213人阅读

一、水平或垂直居中

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}

 

二、水平+垂直居中

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>
middle&center

 

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;}

 

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>

 

CSS 居中


联系
我们