两列或三列布局

  • 使用flex
  • float
  • 左右position:absolute,中间margin-left,margin-right
圣杯和双飞翼布局，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
<!-- 圣杯布局：column左浮动center宽度100%，否则会导致高度坍塌left使用负外边距margin-left:-100%,然后使用相对定位定位到最左边right直接使用负边距居右--><header id="header">header</header><main id="container">  <div id="center" class="column">center</div>  <div id="left" class="column">left</div>  <div id="right" class="column">right</div></main><footer id="footer">footer</footer><!--  双飞翼--><header id="header">header</header><main id="container" class="column">  <div id="center">center</div></main><aside id="left" class="column">left</aside><aside id="right" class="column">right</aside><footer id="footer"></footer>

垂直水平居中

  • 水平居中text-align:center和块级元素的margin:0 auto;
  • table方案，（IE8+）
<style>.table{    display:table;}.cell{    display:table-cell;    text-align:center;    vertical-align:middle;}</style><div class="table">    <div class="cell">        <img src="http://p0.qhimg.com/t01c430356016e16a2c.png" alt="" />    </div></div>
  • absolute+margin:auto方案，兼容主流的浏览器；但是需要定义父容器的高度，否则子元素绝对定位会导致父元素的坍塌。
.absolute-aligned {    position: relative;    min-height: 500px;    background: hsl(200, 100%, 97%);}.absolute-aligned img {    margin: auto;    position: absolute;    top: 0; left: 0;    bottom: 0; right: 0;}
  • absolute+translate，(IE9+)，同样需要设置父元素的高度
.center {    background: hsl(180, 100%, 97%);    position: relative;    min-height: 500px;}.center img {    position: absolute;    top: 50%; left: 50%;    transform: translate(-50%, -50%);    width: 30%; }
  • Flexbox方案
.center {     background: hsl(240, 100%, 97%);    display: flex;    justify-content: center;    align-items: center;}
  • calc方案，IE9+，更适合子元素宽高固定的情况
// 50%是父元素的中心点，减去图片宽度和高度的一半从而达到定位效果.calc {  background-color: hsl(300, 100%, 90%);  min-height: 350px;  position: relative;}.calc img {  width: 100px;  height: 100px;  position: absolute;  left: calc(50% - 50px);  top: calc(50% - 50px);}