CSS 常见问题总结（1）

垂直水平居中

垂直水平居中，在css布局中，也算是老生常谈的问题了，这里做下整理总结。具体的布局，也还是要看实际需求，所以可以按照不同的类型，分为不同的解决方式。

固定宽高

1.绝对定位两种方式

• 优点： 兼容性良好
• 缺点： 需要固定元素宽高

第一种：

div{
   position:absolute;
   width:100px;
   height:100px;
   left:50%;
   top:50%;
   margin-left:-50px;
   margin-top:-50px;
} 

第二种：

div{
     position:absolute;
     width:50px;
     height:50px;
     left:0;
     top:0;
     right:0;
     bottom:0;
     margin:auto;
} 

2.transform 方式

• 优点： transform属性兼容，不过现代浏览器支持也已经都基本支持了，需要添加前缀
• 缺点： 需要固定元素宽高

div{
   width:50px;
   height:50px;
   background:#f17c67;
   transform: translate3D(50%,50%,0);
} 

宽高不固定

1.Flex布局

• 优点： 宽高没限制，单行文本或者多行文本都可以实现垂直居中
• 缺点： 需要考虑兼容性

   display:flex;/*Flex布局*/
   display: -webkit-flex; /* Safari */
   justify-content: center;／*设置水平居中*／
   align-items:center;/*指定垂直居中*/
}

2.Grid布局
Grid实现垂直水平居中，有两种写法，第一种是在父元素上边设置，第二种是在子元素上设置，不需要同时设置

• 优点： 不限制宽高，操作方便，可扩展性强，在自适应方面，可以轻松实现很多布局
• 缺点： 兼容性不够好

第一种方式

.parentElement{
  display:grid;
  align-items:center;
  justify-content: center;
}

第二种方式

.parentElement{
  display:grid;
}
.childElement{
   align-self:center;
   justify-self: center;
}

3.模拟Table，实现垂直居中布局

• 优点： 不限制宽高，兼容性良好
• 缺点： 实现复杂布局，不友好。

.parentElement{
  display:table;
}
.childElement{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

具体demo可以点击 codepen查看

以上实现垂直水平居中的方式，和有利弊，需要针对不同需求，做相应改变。

双栏布局

需求：左边宽度固定，右边自适应

浮动

查看demo codepen

.left{
  float:left;
  width:100px;
  background:#f17c67;
}
.right{
  margin-left:100px;
  background:#ddf0ed;
}

绝对定位

查看demo codepen

.left{
  float:left;
  width:100px;
  background:#f17c67;
}
.right{
  position:absolute;
  background:#ddf0ed;
  left:100px;
  right:0;
}

Grid布局

查看demo codepen
此方法方便快捷，扩展性好，但兼容性有点尴尬。

.parentElement{
    display:grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 200px;
}

具体知识点，有时间慢慢完善。