html水平居中、垂直居中transfrom、translate的使用，利用position属性设置相对布局或绝对布局

html水平居中、垂直居中transfrom、translate的使用，利用position属性设置相对布局或绝对布局

transfrom可通过百分比很好的设置组件的布局，灵活性高，如下笔者对.body_banner里面的ima元素设置水平垂直居中。

1.html部分

<div class="box_body">
    <div class="body_banner">
         <p><img src="./images/1号店/loadimg.jpg" /></p>
     </div>

     <div class="body_login"></div>
</div>

2.css

.body_banner{
    height: 600px;
    width: 60%;
    background-color: #605d9c;
    float: left;
<!--首先对父级元素设置相对布局-->
    position: relative;

}

.body_banner>p{
    /*margin: auto;
    text-align: center;*/
    <!--再对子元素设置绝对布局-->
    position: absolute;
    <!--将距离顶部与左边的距离设置为50%-->
    top: 50%;
    left: 50%;
	<!--最后利用translate剪掉组件自身占用的位置大小50% 的到便是水平与垂直居中的效果-->
    transform: translate(-50%,-50%);
}

3.效果图如下

以上便是笔者最近的学习成果，如有偏差，请指正谢谢！