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

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

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

一、文本垂直水平置中

1、水平置中：

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

2、垂直置中：

　　1）簡單的單行文本　

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

1 <p>2     垂直水平置中3 </p>

1 p{2     width: 200px;3     height: 200px4     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 <p2     <span>國際《兒童權利公約》界定的兒童系指18歲以下的任何人</span>3 </p>

 1 p{  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 <p>2     <p>國際《兒童權利公約》界定的兒童系指18歲以下的任何人</p>3 </p>

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

 1 p{  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 p{  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 p{  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 p{  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值，此值為父元素高度減去子項目高度的一半

p{    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

　　用這張圖片做示範

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

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

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

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

p{    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;

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

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

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

　　定位+margin負值

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

　　定位+margin: auto;

p{    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值

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

　　padding值

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

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

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

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

　　用background實現

1 <p></p>

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

　　效果如下：

　　

原文來自：http://www.cnblogs.com/Ni-F/p/6937931.html 感謝作者分享！