css中的左右垂直居中的问题，可兼容各种版本浏览器的写法

如题分为垂直居中，左右居中，先挑简单的记录。

一、左右居中

1、我刚开始写代码的时候，老师就直接告诉我一个简单的方法，那就是：

width：500px;
height:200px;
margin:0 auto;

 有木有？直接设置margin左右值为auto自动，它就自动居中，但是这也只是在只有一个子元素的情况下。

2、当有多个内容需要居中的时候，一般我这么做

 .bigbox{
    width:900px;
    height:300px;
    background-color:#eee;
    margin:20px auto;
    overflow:hidden;
    text-align:center;
    font-size:75px;
    color:#fff;
}
 .bigbox div{
    width:250px;
    height:300px;
    background-color:#000;
    float:left;
}
  .bigbox div:nth-child(2){
    margin:0 75px;
} 

<div class="bigbox">
    <div>left</div>
    <div>middle</div>
    <div>right</div>
</div>

直接排排，算下剩下的值，给第二个来个左右的距离，可以三个方块居中了。这种方法很简单，但是，当需求那边要求删掉一个框时。。。还得再调，比较不好。

3、设置行内块元素，父级设置元素居中text-align:center;

.bigbox{
    width:900px;
    height:300px;
    background-color:#eee;
    margin:20px auto;
    overflow:hidden;
    text-align:center;
    color:#fff;
}
.bigbox div{
    width:250px;
    height:300px;
    background-color:#000;
    display:inline-block;
}

 二、垂直居中

1、常见的文字居中

直接

line-height

2、同样的想让上面三个块垂直居中，这里可以用vertical-align:middle;

vertical-align，这真的是让我很忧桑，时不时就没效果啊，偏偏用表格写的时候，哎？又可以了，难道一定要表格形式，其实也不是酱的。

还有它的另外一种情况：它是定义行内元素的基线相对于该元素所在行的基线的垂直对齐，看到木有，相对于该元素所在行，该元素所在行！这也是为毛咱都给他加了display：inline-block还木有用。

首先在上面三个块的前面再设置一个p标签或者其他什么标签给他宽度为0，高度为100%，先让它垂直居中，其他三个div也垂直居中，就出现效果了

 .bigbox2 p{
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
    margin:0;
}
.bigbox2 div{
    width:250px;
    height:auto;
    background-color:#f00;
    display:inline-block;
    vertical-align:middle;
}
.bigbox2{
    width:900px;
    height:300px;
    background-color:#eee;
    margin:20px auto;
    overflow:hidden;
    font-size:75px;
    color:#fff;
}

 1 //方法二：同样使用vertical-align:middle;定义模块tabel-cell 2 .table{
 3   display:tabel;
 4   width: 100%;
 5   height: 40px;
 6 }
 7 .table-cell{
 8   display:table-cell;
 9   text-align: center;
10   vertical-align: middle;
11 }
12 <div class="tabel">
13   <p class="table-cell">使用tabel-cell</p>
14 </div>

 

3、还有一种方法是用了弹性盒模型：display:flex;

.bigbox3{
    width:900px;
    height:300px;
    background-color:#eee;
    margin:20px auto;
    overflow:hidden;
    font-size:75px;
    color:#fff;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
 .bigbox3 div{
    width:250px;
    height:200px;
    background-color:#f00;
}

 justify-content 用于设置或检索弹性盒子元素在主轴（横轴x）方向上的对齐方式，align-items显然纵轴~

4、使用定位absolute

<style media="screen">
     .absolute{
          position: relative;
          background: yellow;
          height: 40px;
     }
     .absolute p{
          position: absolute;
          display: inline-block;
          width: 30px;
          top: 50%;
          left: 50%;
          height: 20px;
          margin-left: -15px;
          margin-top: -10px;
      }
 </style>
<div class="absolute">
       <p>absolute</p>
 </div>

 

转载于:https://www.cnblogs.com/layaling/p/6211825.html