css中浮动元素相对父元素DIV居中对齐方法

一,  问题描述:

        在一外层DIV中,有三个内部DIV在排版的时候,希望三个DIV所显示的内容在同一行,之前使用的是 CSS 中 float 属性 加 margin属性来控制,但是发现对于响应式和手机端的显示,并不友好,因为屏幕宽度的不同,字体的不同导致显示的时候,会出现整体内容并不在居中状态,解决方法如下

HTML代码
<div class='box'>

 <div class='left'>内容一</div>
 <div class='left'>内容二</div>
 <div class='left'>内容三</div>

</div>

1:    方法一 使用 CSS  flex布局 直接在外层 DIV增加flex样式属性,这样可以一次性实现内部DIV 浮动并且内容在 .box中垂直和水平居中.

CSS代码
.box{
  display:flex;
  justify-content:center;
}

2: 方法二 可以使用CSS中的 绝对定位的方法,先是外部.box的DIV实现50%水平居中,再使用css transform 属性实现内部元素 相对父类元素做-50%的居中这样内容刚好在屏幕中间显示,具体css代码如下

 CSS代码
 .box{
      position:absolute;   #绝对定位
   left:50%;        #水平居中
   top:50%          #垂直居中
   -webkit-transform:translate(-50%,-50%);    # 内容相对父元素水平垂直居中
   -moz-transform:translate(-50%,-50%);    # 内容相对父元素水平垂直居中
   transform:translate(-50%,-50%);    # 内容相对父元素水平垂直居中

}

以上就是本人解决的一些方法,欢迎有更好方法的小伙伴留言交流 666