CSS div 图片居中代码怎么写? 下面本篇文章给大家介绍一下使用 CSS 实现 div 里 img 图片水平垂直居中的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
body 结构
- <body>
- <div>
- <img src="1.jpg" alt="haha">
- </div>
- </body>
方法一:
将 display 设置成 table-cell, 然后水平居中设置 text-align 为 center, 垂直居中设置 vertical-align 为 middle.
- <style type="text/css">
- *{margin: 0;padding: 0;}
- div{
- width:150px;
- height: 100px;
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- border:1px solid #000;
- }
- img {
- width: 50px;
- height: 50px;
- }
- </style>
结果如下图所示:
方法二:
通过 position 定位来实现. 将 div 设置成相对定位 relative, 将 img 设置成绝对定位 absolute,left:50%,top:50%, 此时图片的左上角位于 div 的中心, 要是图片的中心位于 div 的中心, 就需要将图片向上移动图片高度的一半, 并向左移动图片宽度的一半.
- <style type="text/css">
- *{margin: 0;padding:0;}
- div{
- width:150px;
- height: 100px;
- position: relative;
- border:1px solid #000;
- }
- img {
- width: 50px;
- height: 50px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -25px; /* 高度的一半 */
- margin-left: -25px; /* 宽度的一半 */
- }
- </style>
结果如下图所示:
方法三: 可以用在不清楚图片图片或元素的真实宽高情况下
还是通过 position 定位来实现. 将 div 设置成相对定位 relative, 将 img 设置成绝对定位 absolute,left:50%,top:50%, 此时图片的左上角位于 div 的中心, 要是图片的中心位于 div 的中心, 就需要将图片向上移动图片高度的一半, 并向左移动图片宽度的一半, 如果不知道元素的宽高, 可以用 transform: translate(-50%,-50%);
- <style type="text/css">
- *{margin: 0;padding:0;}
- div{
- width:150px;
- height: 100px;
- position: relative;
- border:1px solid #000;
- }
- img {
- width: 50px;
- height: 50px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- }
- </style>
方法四:
- <style type="text/css">
- *{margin: 0;padding:0;}
- div{
- width:150px;
- height: 100px;
- position: relative;
- border:1px solid #000;
- }
- img {
- width: 50px;
- height: 50px;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- }
- </style>
方法五: 弹性布局 flex
- <style type="text/css">
- *{margin: 0;padding:0;}
- div{
- width:150px;
- height: 100px;
- border:1px solid #000;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- img {
- width: 50px;
- height: 50px;
- }
- </style>
效果都一样, 希望能帮到大家!
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17623.html