本文目录
怎么使用CSS让图片水平垂直都居中
使用display:table-cell和vertical-align:middle属性即可；类似使用table的valign:middle功能；
如何实现左右定宽，中间自适应宽度的css布局
对于左右定宽中间自适应这种css布局，其实有很多实现方法，下面简单介绍几种，供大家参考；
绝对定位+margin
原理是将左右两边的div使用绝对定位分别定位到左右两边，中间的div使用margin属性，留出左右div的宽度，将其中间的div宽度设为100%即可，代码如图
flex布局（弹性盒子）
在外层包一层div，设置属性display：flex，里面的子元素设置属性flex:1,具体实现，看下图代码
float（浮动布局）
float布局将左右div分别浮动到左右，中间使用margin属性，留出左右的宽度，这个跟绝对定位布局有点相似，代码如下图
效果图：
总结：
实现这种左右定宽，中间自适应的css布局，其实有很多种实现方法，比如还有“圣杯布局”、“双飞翼布局”；个人比较推荐flex布局方式，这也是css3新属性，实现起来比较方便；如有疑问，欢迎在评论下方留言，大家一起讨论-displayflex
CSS3 display:flex和display:box有什么区别
父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。
如：
html：
《article》
《section》01《/section》
《section》02《/section》
《section》03《/section》
《/article》
article{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background:green;
}-displayflex
**区别**，仅是各阶段草案命名。
- W3C 2009年第1次草案：(
Flex可以和Grid混合使用吗
Flex和Grid其实是网页开发中两种不同的布局方式，在同一个项目中可以混合使用；
最早在网页开发中，一般都是使用定位、浮动等方式来进行页面布局，然而这种方式有很多局限性，代码量比较多，随着css3的诞生，出现了Flex布局和Grid布局；
Flex布局
Flex是Flexible Box的缩写，为“弹性布局”，用来为盒状模型提供最大的灵活性。每一个元素都可以指定为Flex布局，包括行内元素,设置display：flex;这种Flex布局可以很快速、方便处理网页布局；-displayflex
Grid布局
Grid布局又称为“网格布局”，是一种二维网格布局；只需要给元素定义：display：grid,并设置列和行的大小，然后定义子元素的位置即可；这种布局目前兼容性还不是很好；
总结
这种两种布局都是为了解决网页布局问题而创建的，同时两者之间是可以配合着使用，所以在同一项目中完全可以混合使用；希望以上回答可以帮到你，如有疑问，请在评论区留言
