CSS样式div和img居中

最新推荐文章于 2022-05-10 17:05:26 发布

蚂蚁的希望

最新推荐文章于 2022-05-10 17:05:26 发布

阅读量594

点赞数

分类专栏： Vue CSS 居中

本文链接：https://blog.csdn.net/qq_36784975/article/details/102493244

版权

Vue 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

居中

1 篇文章 0 订阅

订阅专栏

简介

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