CSS样式div和img居中

简介

对div和img进行水平、水平垂直居中

水平居中

• 方法一

<div class="father">
    <img class="child" src="" alt="">
    <!-- <div class="child"> -->

    </div>
</div>

.father{
    position: relative;
    border: 1px solid red;
    height: 10rem;
}

.child{
    margin: 0 auto;
    display: block;
    height: 5rem;
    border: 1px solid blue;
    width: 5rem;
}
           

• 方法二

<div class="father">
    <img class="child" src="" alt="">
    <!-- <div class="child"> -->

    </div>
</div>

.father{
   text-align: center;
   border: 1px solid red;
}

.child{
    height: 5rem;
    border: 1px solid blue;
    width: 5rem;
    display: inline-block;
}
           

水平垂直居中

• 方法1

<div class="parent">
    <div class="child">
    <!-- <img class="child" src="" alt=""> -->
    </div>
</div>

.father{
    position: relative;
    border: 1px solid red;
    height: 10rem;
}
<!--设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小-->
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    margin-left: -1rem;
    border: 1px solid blue;
}
           

• 方法2

<div class="parent">
    <div class="child">
    <!-- <img class="child" src="" alt=""> -->
    </div>
</div>

.father{
    width: 10rem;
    height: 10rem;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child{
	width: 5rem;
    height: 5rem;
    display:inline-block;
    border: 1px solid blue
}