关于用css实现文本和图片垂直水平居中

关于用css实现文本和图片垂直水平居中

 

一直相信好记性不如烂笔头，最近遇到很多用到垂直居中的，整理一下以便日后查阅。

一、文本垂直水平居中

1、水平居中：

　　文字水平居中没什么好说的，用text-align: center;即可很容易的实现。

---

2、垂直居中：

　　1）简单的单行文本　

　　利用line-height==height,使得单行文本垂直居中。

 <div>
     垂直水平居中
 </div>

 div{
     width: 200px;
     height: 200px;
     text-align: center;
     line-height: 200px;
     background:#1AFF00;
 }

　　

　　简单点来说，用p标签就可以，就像这样　

<p>垂直水平居中</p>

 p{
     width: 200px;
     height: 200px;
     text-align: center;
     line-height: 200px;
     background:#00ABFF;
 }

　　效果如下：

---

　　2）多行文本

　　利用表格元素的特性，块级父元素display: table;内联元素display: table-cell;vertical-align: middle;　

（内联）

 <div
     <span>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</span>
 </div>

 div{
     width: 200px;
     height: 200px;
     display: table;
     background:#1AFF00;
 }
 span{
     display: table-cell;
     vertical-align: middle;
 }

---

（块级）

 <div>
     <p>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</p>
 </div>

　

　　定位+transform: translateY(-50%);　

 div{
     position: relative;
     width: 200px;
     height: 200px;
     background: #00ABFF;
 }
 p{
     position: absolute;
     top: 50%;
     left: 0;
     width: 200px;
     height: 64px;
     transform: translateY(-50%);
 }

　　定位+margin负值

 div{
     position: relative;
     width: 200px;
     height: 200px;
     background:#1AFF00;
 }
 p{
     position: absolute;
     top: 50%;
     left: 0;
     width: 200px;
     height: 64px;
     margin-top: -32px;
 }

　　定位+margin: auto;

 div{
     position: relative;
     width: 200px;
     height: 200px;
     background:#00ABFF;
 }
 p{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     width: 200px;
     height: 64px;
 }

　　两者都是定宽定高，父元素用padding值，此值为父元素高度减去子元素高度的一半

 div{
     width: 200px;
     height: 64px;
     padding: 68px 0;
     background:#1AFF00;
 }
 p{
     width: 200px;
     height: 64px;
 }

　　两者都是定宽定高，父元素用overflow: hidden;（css hack）子元素用margin值，此值为父元素高度减去子元素高度的一半

 div{
     width: 200px;
     height: 200px;
     overflow: hidden;
     background:#00ABFF;
 }
 p{
     width: 200px;
     height: 64px;
     margin:68px auto;
 }

　　效果如下：

　　

---

二、图片垂直水平居中

1、水平居中

　　1）img在css初始设置中是inline-block，行内块元素，此时若是要水平居中用text-align:center;

　　2）给img元素设置display:block;转换为块级元素，要想水平居中用margin:0 auto;

---

2、垂直居中

　　 1.jpg

　　用这张图片做示范

 <div>
     <img alt="" src="1.jpg" />
 </div>

　　

　　line-height==height  vertical-align: middle;

 div{
     width: 198px;
     height: 198px;
     text-align: center;
     line-height: 198px;
     border: 1px solid #8900FF;
 }
 img{
     vertical-align: middle;
 }

　　display: table-cell;vertical-align: middle;

 div{
     display: table-cell;
     vertical-align: middle;
     width: 198px;
     height: 198px;
     border: 1px solid #8900FF;
 }
 img{
     display: block;
     margin: 0 auto;
 }

　　

　　display: table-cell;vertical-align: middle; text-align: center;

 div{
     display: table-cell;
     vertical-align: middle;
     text-align: center;
     width: 198px;
     height: 198px;
     border: 1px solid #8900FF;
 }

　　定位+display: block;transform: translate(-50%,-50%);

 div{
     position: relative;
     width: 198px;
     height: 198px;
     border: 1px solid #8900FF;
 }
 img{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     display: block;
 }

　　定位+margin负值

 div{
     position: relative;
     width: 198px;
     height: 198px;
     border: 1px solid #8900FF;
 }
 img{
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -75px 0 0 -75px;
 }

　　定位+margin: auto;

 div{
     position: relative;
     width: 198px;
     height: 198px;
     border: 1px solid #8900FF;
 }
 img{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     display: block;
 }

　　 overflow: hidden;margin值

 div{
     width: 198px;
     height: 198px;
     overflow: hidden;
     border: 1px solid #8900FF;
 }
 img{     margin: 25px;
 9 }

　　padding值

 div{
     padding: 25px;
     width: 148px;
     height: 148px;     border: 1px solid #8900FF;
 }

　

---

　

　　用table的属性+vertical-align: middle;实现

 <div>
     <span><img alt="" src="1.jpg" /></span>
 </div>

 div{
     display: table;
     width: 198px;
     height: 198px;
     text-align: center;
     border: 1px solid #8900FF;
 }
 span{
     display:table-cell;
     vertical-align: middle;
 }

---

　　用background实现

 <div></div>

 div{
     width: 198px;
     height: 198px;
     border: 1px dashed #8900FF;
     background: url(1.jpg) no-repeat center center;
 }

　　效果如下：

　　

此篇完！！！