css几个经典布局实例

一、水平居中

  水平居中的页面布局中最为常见的一种布局形式，多出现于标题，下面介绍几种实现水平居中的方法。

  1、使用inline-block 和 text-align实现

.parent{text-align: center;}
.child{display: inline-block;}

  2、使用margin:0 auto来实现

.child{width:200px;margin:0 auto;}

  3、使用绝对定位实现

.parent{position:relative;}  
.child{position:absolute;left:50%;transform:translate(-50%);}

  4、使用flex布局实现

.parent{display:flex;justify-content:center;}/*第一种方法*/ 
.parent{display:flex;} .child{margin:0 auto;} /*第二种方法*/

二、垂直居中

  1、vertical-align

  只有一个元素属于inline或是inline-block，它的vertical-align属性才会起作用。
  在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

.parent{display:table-cell;vertical-align:middle;height:20px;}/*第一种方法*/ 
.parent{display:inline-block;vertical-align:middle;line-height:20px;}/*第二种方法*/ 

  2、绝对定位

.parent{position:relative;} 
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

  3、使用flex实现

.parent{display:flex;align-items:center;}

三、左列定宽，右列自适应

  1、利用float+margin实现

.left{float:left;width:100px;}
.right{margin-left;margin-left:100px;}
作者：
链接：https://www.imooc.com/article/2235
来源：慕课网

  2、使用flex实现

.parent{display:flex;} .left{width:100px;} .right{flex:1;}

四、两侧定宽，中栏自适应

.left{width：100px;float:left;} 
.center{float:left;width:100%;margin-right:-200px;} 
.right{width:100px;float:right;}

在网上浏览此类文章时发现一篇极好的文章。
链接：https://www.imooc.com/article/2235
来源：慕课网