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

黄舟

發布： 2017-06-06 13:25:26

原創

2050 人瀏覽過

關於用css實作文字和圖片垂直水平居中

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

一、文字垂直水平居中

#1、水平居中：

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

2、垂直居中：

1）簡單的單行文本　

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

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

登入後複製

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

: mid
dl

（內聯）

1 <p
2     <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>

登入後複製

　　定位+trans

form: 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 }

登入後複製

　　兩兩定位+margin: auto;

 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 }

登入後複製

　　兩兩二二等。者都是定寬定高，父元素用

padding

值，此值為父元素高度減去子元素高度的一半

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

登入後複製

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

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

登入後複製

效果如下：

#二、圖片垂直水平居中

#1、水平居中

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

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

#2、垂直置中

############################### ############　　### ######1.jpg############　　###用這張圖片做示範###### ##########

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

登入後複製

###　　line-height==height 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;###

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

登入後複製

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

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

登入後複製

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

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

登入後複製

###　　定位+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 感谢作者分享！

以上是關於用css實現文字和圖片垂直水平居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！