关于用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;
}

  效果如下:

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


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

  效果如下:

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


二、图片垂直水平居中

1、水平居中

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

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


2、垂直居中

  关于用css实现文本和图片垂直水平居中 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;
}

  效果如下:

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

此篇完!!!

上一篇:sql server 创建视图添加表时出现从其他数据库导入的表未显示出来


下一篇:简单学C——第四天