CSS 布局
不给元素指定一个具体的width,它就会自动适应其内容的宽度。而且水平居中。
figure{
width:min-content;
margin:auto;
}
如何精确的控制表格列宽
可以使用table-layout来让表格的行为更加可控。table-layout的默认值是auto,其行为模式被称作自动表格算法，也就是我们最为熟悉的表格布局行为。不过，它还接受另外一个值fixed，这个值的行为要明显可控一些。
在使用时，我们只需要对<table>元素元素或其他具有display:table样式的元素应用这个属性即可。为了确保这个技巧奏效，需要为这些表格元素指定一个宽度。同样，为了让text-overflow:ellipsis发挥作用，我们还需要为那一列指定宽度。
满幅的背景，定宽的内容
默认情况下，我们实现这个效果需要设置两层的样式：
footer{
background:#333;
}
.wrapper{
max-width:900px;
margin:1em auto;
}
我们可以改变margin:auto这个属性。这条声明所产生的左右外边距实际都等于视口宽度的一半减去内容宽度的一半。我们可以使用calc()函数，它允许我们在CSS中直接以这种简单地算式来指定属性的值。
margin:1em calc(50%-450px);
在calc()函数中用空白符把- 和+隔起来，否则会产生解析错误！这个看似怪异的规则是为了向前兼容。
之所以要在页脚内加一层容器元素，唯一的原因就是为了给它的margin指定神奇的auto关键字，从而实现内容的水平居中布局。
优化的结果是：
footer{
padding:1em;
padding:1em calc(50%-450px);
background:#333;
}如果屏幕的宽度比内容的宽度还要窄，这个解决方案所产生的效果就是没有内边距，我们可以用媒体查询来修复这个问题。
垂直居中
在CSS中对元素进行水平居中是非常简单地：如果它是一个行内元素，就对它的父元素应用text-align:center;如果它是一个块级元素，就对它自身应用margin:auto。
CSS领域有一个常见的现象，真正的解决方案往往来自于最意想不到的地方。在这个例子中，答案来自于CSS变形属性。当我们在translate()变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，而这正是我们所需要的。
main{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
用了这个技巧，导致我么人呢有时不能选用绝对定位，因为它对整个布局的影响太过强烈。而且如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁剪掉。
假如不想绝对定位，可以使用margin,vh来做定位，vw是与视口宽度相关的。与常人的直觉不符的是，1vw实际上表示视口宽度的1%，而不是100%。与vw类似，1vh表示视口高度的1%。当视口宽度小于高度时，1vmin等于1vw,否则等于1vh。当视口宽度大于高度时，1vmax等于1vw，否则等于1vh。
基于flexbox的解决方案
这是毋庸置疑的最佳解决方案，因为flexbox（伸缩盒）是专门针对这类需求设计的。我们之所以讨论其他方案，仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。
我们只需写两行声明即可：先给这个待居中元素的父元素设置display:flex,再给这个元素自身设置我们再熟悉不过的margin:auto。
body{
display:flex;
min-height:100vh;
margin:0;
main{
margin:auto;
}
当我们使用flexbox时，margin:auto不仅水平方向上将元素居中，垂直方向上也是如此。还有一点，我们甚至不需要指定任何宽度：这个居中元素分配的宽度等于max-content.Flexbox的另一个好处在于，它还可以将匿名容器垂直居中。例子：
<main>Center me! </center>
紧贴底部的页脚
Flexbox对于此类问题同样是完美的选择。只需要寥寥几行CSS就可以完美达成十分灵活的布局效果，而且不需要复杂的计算或是添加多余的HTML元素等。首先我们需要对body元素设置display:flex，因为它是这三个主要区块的父元素。当父元素获得这个属性之后，就可以对其子元素触发“伸缩盒布局模型”。我们还需要把flex-flow设置为column,否则子元素会被水平排放在一行上。
body{
display:flex;
flex-flow:column;
}
只应用flex而没有应用其他属性时，会让所有子元素水平排列。
