记录实战中应用transform的一些问题

<div class="subject  w">
                <img src="./assets/logo.png" alt="" class="subject-logo">
                <div class="subject-info">
                    <h2 class="subject-title">项目标题:基于云服务平台的高分卫星数据京津冀一体化综合应用服务软件</h2>
                    <span class="subject-date">项目时间:2021.06-2021.07</span>
                    <p class="subject-role">项目角色:总体组组长、前端组组长</p>
                    <p class="subject-intro">
                        项目介绍:遥感信息监测包括面向农业、林业、环保领域内9项典型目标的遥感要素遥感的提取服务和监测服务,服务地址:http://121.36.32.135:8080/onlineClassifyPage
                    </p>
                    <p class="subject-tech">技术介绍:html、css、js、jquery、element、vue、axios、openlayers、webpack</p>
                </div>
            </div>
            <img class="subject-content" src="./assets/logo.png" alt="">

.subject {
    height: 100%;
    position: relative;
    display: inline-block;
    /* margin:0 auto; */
    margin-left: 50%;
    transform: translateX(-50%);
    margin-right: 20px;
}
.subject-content {
    width: 9%;
    height: 80%;
    display: inline-block;
    /* margin-left: -500px; */
}

问题描述：div默认为块级元素，但是改变display为行内块元素以后，仍然独占一行，img为行内块元素，并没有独占一行，从后面仍然有内容可以猜测应该是div挤占了img的位置，最后通过实验得出问题出在"margin-left: 50%; transform: translateX(-50%);"

1. 要彻底搞清楚这个问题，首先我们要知道transform的原理，CSS3中，transform属性允许盒子模型被进行二维或三维空间坐标的变换，也就是说，元素现在的位置都是基于原先的位置进行的变换，从chrome控制台我们也可以得出这个结论。
   
   由于div里面都是行内块元素，所以不能设置text-align，目前只能是margin-left进行设置。