關於用css實現文本和圖片垂直水平居中

本文轉載自查看原文 2017-06-03 17:39 1526 html+css

關於用css實現文本和圖片垂直水平居中

一直相信好記性不如爛筆頭，最近遇到很多用到垂直居中的，整理一下以便日后查閱。

一、文本垂直水平居中

1、水平居中：

　　文字水平居中沒什么好說的，用text-align: center;即可很容易的實現。

2、垂直居中：

　　1）簡單的單行文本　

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

1 <div>
2     垂直水平居中
3 </div>

1 div{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#1AFF00;
7 }

　　簡單點來說，用p標簽就可以，就像這樣　

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

1 p{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#00ABFF;
7 }

　　效果如下：

　　2）多行文本

　　利用表格元素的特性，塊級父元素display: table;內聯元素display: table-cell;vertical-align: middle;　

（內聯）

1 <div
2     <span>國際《兒童權利公約》界定的兒童系指18歲以下的任何人</span>
3 </div>

 1 div{
 2     width: 200px;
 3     height: 200px;
 4     display: table;
 5     background:#1AFF00;
 6 }
 7 span{
 8     display: table-cell;
 9     vertical-align: middle;
10 }

（塊級）

1 <div>
2     <p>國際《兒童權利公約》界定的兒童系指18歲以下的任何人</p>
3 </div>

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

 1 div{
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     background: #00ABFF;
 6 }
 7 p{
 8     position: absolute;
 9     top: 50%;
10     left: 0;
11     width: 200px;
12     height: 64px;
13     transform: translateY(-50%);
14 }

　　定位+margin負值

 1 div{
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     background:#1AFF00;
 6 }
 7 p{
 8     position: absolute;
 9     top: 50%;
10     left: 0;
11     width: 200px;
12     height: 64px;
13     margin-top: -32px;
14 }

　　定位+margin: auto;

 1 div{
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     background:#00ABFF;
 6 }
 7 p{
 8     position: absolute;
 9     top: 0;
10     left: 0;
11     right: 0;
12     bottom: 0;
13     margin: auto;
14     width: 200px;
15     height: 64px;
16 }

　　兩者都是定寬定高，父元素用padding值，此值為父元素高度減去子元素高度的一半

 1 div{
 2     width: 200px;
 3     height: 64px;
 4     padding: 68px 0;
 5     background:#1AFF00;
 6 }
 7 p{
 8     width: 200px;
 9     height: 64px;
10 }

　　兩者都是定寬定高，父元素用overflow: hidden;（css hack）子元素用margin值，此值為父元素高度減去子元素高度的一半

 1 div{
 2     width: 200px;
 3     height: 200px;
 4     overflow: hidden;
 5     background:#00ABFF;
 6 }
 7 p{
 8     width: 200px;
 9     height: 64px;
10     margin:68px auto;
11 }

　　效果如下：

二、圖片垂直水平居中

1、水平居中

　　1）img在css初始設置中是inline-block，行內塊元素，此時若是要水平居中用text-align:center;

　　2）給img元素設置display:block;轉換為塊級元素，要想水平居中用margin:0 auto;

2、垂直居中

　　 1.jpg

　　用這張圖片做示范

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

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

 1 div{
 2     width: 198px;
 3     height: 198px;
 4     text-align: center;
 5     line-height: 198px;
 6     border: 1px solid #8900FF;
 7 }
 8 img{
 9     vertical-align: middle;
10 }

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

 1 div{
 2     display: table-cell;
 3     vertical-align: middle;
 4     width: 198px;
 5     height: 198px;
 6     border: 1px solid #8900FF;
 7 }
 8 img{
 9     display: block;
10     margin: 0 auto;
11 }

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

1 div{
2     display: table-cell;
3     vertical-align: middle;
4     text-align: center;
5     width: 198px;
6     height: 198px;
7     border: 1px solid #8900FF;
8 }

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

 1 div{
 2     position: relative;
 3     width: 198px;
 4     height: 198px;
 5     border: 1px solid #8900FF;
 6 }
 7 img{
 8     position: absolute;
 9     top: 50%;
10     left: 50%;
11     transform: translate(-50%,-50%);
12     display: block;
13 }

　　定位+margin負值

 1 div{
 2     position: relative;
 3     width: 198px;
 4     height: 198px;
 5     border: 1px solid #8900FF;
 6 }
 7 img{
 8     position: absolute;
 9     top: 50%;
10     left: 50%;
11     margin: -75px 0 0 -75px;
12 }

　　定位+margin: auto;

 1 div{
 2     position: relative;
 3     width: 198px;
 4     height: 198px;
 5     border: 1px solid #8900FF;
 6 }
 7 img{
 8     position: absolute;
 9     top: 0;
10     left: 0;
11     right: 0;
12     bottom: 0;
13     margin: auto;
14     display: block;
15 }

　　 overflow: hidden;margin值

 1 div{
 2     width: 198px;
 3     height: 198px;
 4     overflow: hidden;
 5     border: 1px solid #8900FF;
 6 }
 7 img{ 8     margin: 25px;
 9 }

　　padding值

1 div{
2     padding: 25px;
3     width: 148px;
4     height: 148px;5     border: 1px solid #8900FF;
6 }

　　用table的屬性+vertical-align: middle;實現

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

 1 div{
 2     display: table;
 3     width: 198px;
 4     height: 198px;
 5     text-align: center;
 6     border: 1px solid #8900FF;
 7 }
 8 span{
 9     display:table-cell;
10     vertical-align: middle;
11 }

　　用background實現

1 <div></div>

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

　　效果如下：

此篇完！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css圖片垂直水平居中及放大(實現水平垂直居中的效果有哪些方法？） css垂直水平居中實現的方式 css圖片居中(水平居中和垂直居中) [css]實現垂直居中水平居中的幾種方式 css圖片響應式+垂直水平居中1 CSS 實現盒子水平居中、垂直居中和水平垂直居中的方法 CSS：水平居中與垂直居中 CSS 水平居中，垂直居中 CSS 水平居中與垂直居中圖片水平居中與垂直居中