zoukankan      html  css  js  c++  java
  • 实现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{
    		150px;
    		height: 100px;
    		display: table-cell;
    		vertical-align: middle;
    		text-align: center;
    		border:1px solid #000;
    	}
    	img {
             50px;
      		height: 50px;
    	}
    </style>
    

    方法二:

    通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

    <style type="text/css">
    	*{margin: 0;padding:0;}
    	div{
    		150px;
    		height: 100px;
    		position: relative;
    		border:1px solid #000;
    	}
    	img {
      		 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{
            150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
             50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
    

    方法四:定位

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
             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{
            150px;
            height: 100px;
            border:1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img {
             50px;
            height: 50px;
        }
    </style>
    

    本文转载自jojo付啾啾

  • 相关阅读:
    Exception handling 异常处理的本质
    一个人运气不好怎么办?做什么事能够马上改变运气?
    autoreleasing on a thread
    Tagged Pointer
    Objective-C 引用计数原理
    oc引用计数原理-引用计数相关变化
    黑箱中的 retain 和 release
    黑幕背后的Autorelease
    自动释放池的前世今生 ---- 深入解析 autoreleasepool
    Exceptions and Errors on iOS
  • 原文地址:https://www.cnblogs.com/Bianco/p/13953357.html
Copyright © 2011-2022 走看看