好程序员前端教程css对齐方案总结

好程序员前端教程css对齐方案总结
垂直居中
通用布局方式(内敛元素和块状元素都适用)

利用flex:
核心代码:

 .container{     display:flex;      flex-direction:column;      justify:center } 

利用transformX(-50%):
核心代码:

 .container{             width: 300px;             height: 300px;             background: red;             position:relative;         	} .child{             position: absolute;             top: 50%;             transform: translateY(-50%);             -webkit-transform: translateY(-50%);  	} 

内敛元素的垂直居中

单行内敛元素:设置内敛元素的高度和行高相等
核心代码:

 .container {     height: 120px;     line-height: 120px; } 

块状元素

固定元素高度的块状元素
核心代码

 .container{     position: relative; } .child{     position: absolute;       top: 50%;       height: 100px;       margin-top: -50px;  } 

未知高度的块状元素
当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
核心代码:

 .container {     position: relative; } .child {     position: absolute;     top: 50%;     transform: translateY(-50%); } 

水平居中
通用布局方式

flex布局
核心代码：

 .container{ display: flex;                 justify-content: center; } absoulte+transform 

核心代码:

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

内敛元素水平居中

text-align:center
核心代码:

 .container{ text-align:center } 

块状元素水平居中

使用 margin:0 auto 必须注明子元素和父元素的宽度
核心代码:

 .container{ margin:0 auto } 

多块状元素：
利用内敛元素布局方式container属性为text-align:center;
核心代码:

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

水平垂直居中
固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。
核心代码:

 .container {     position: relative; } .child {     width: 300px;     height: 100px;     padding: 20px;     position: absolute;     top: 50%;     left: 50%;     margin: -70px 0 0 -170px; } 

未知宽高元素水平垂直居中

利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
核心代码：

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

利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：

 .container {     display: flex;     justify-content: center;     align-items: center; } 

相对于 body 的水平垂直居中

列表布局(兼容性好)
核心代码:

 .outer {     display: table;     position: absolute;     height: 100%;     width: 100%; } .middle {     display: table-cell;     vertical-align: middle; } .inner {     margin-left: auto;     margin-right: auto;      width: 400px; } 

position 布局
核心代码

 .container{	position: absolute;	margin: auto;	left: 0;	top: 0;	right: 0;	bottom: 0;	}