CSS布局

水平居中

1.text-align：center；

盒子中的文字内容水平对齐。

可以水平居中块级元素中的行内元素，如inline、inline-block。

2.margin：0 auto；

可以居中已知宽度的块级元素，无宽度不可使用此方法。

垂直对齐

1.vertical-align：baseline |top |middle |bottom 

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

图片与文字基线对齐：vertical-align：baseline

垂直居中：vertical-align：middle

顶部对齐：vertical-align：top

底线对齐：vertical-align：bottom

*除去图片空白间隙 / 仅供参考，若有错误，请指出，谢谢~ / 

img {
    vertical-align: top;
    border: 0;
}
或将图片转为块级元素即可
img {
    display: block;
}

左右布局与左中右布局

常用float浮动和position定位进行布局，具体请参考我的上一篇微博，CSS的定位机制。

CSS布局

原文：https://www.cnblogs.com/BUBU-Sourire/p/11040777.html