首页 > > 网页制作 > css >

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

2018-06-24 01:25:01来源：未知阅读 ()

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

　　效果如下：

此篇完！！！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML中部分标签的嵌套问题

下一篇：移动端使用rem同时适应安卓ios手机原理解析，移动端响应式开发

DIV居中的经典方法 2020-06-13
CSS中的float和margin的混合使用 2020-06-11
Html/css 列表项区分列表首尾 2020-06-11
css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
ie8下透明度处理 2020-06-11

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签