浅谈CSS定宽居中的奥秘

CSS样式中水平居中和垂直居中

文本居中对齐

• 水平居中对齐
  文本的水平居中对齐的设置其实很简单，代码如下：

.h-center{
text-align: center;
}

• 垂直居中对齐
  文本的垂直居中对齐的设置其实很简单， 代码如下：

.v-center{
line-height:200px;
height:200px;
}
/如果存在多行的文本，添加以下代码/
.v-center{
line-height:1.5;
display: inline-block;
vertical-align:center;
}

通过text-align就可以实现水平居中vertical-align 也可以在垂直方向做到居中.

position属性和margin属性设置居中

代码：

*{
    margin:0;
        }
.center{
				position: relative;
			}
			.box{
				position: absolute;
		/*		top:0;
				left: 0;
				right: 0;
				bottom: 0;  
				margin: auto;*/
				margin: 0 auto; //水平居中
			}

absolute 和margin（负值）

利用了绝对定位，绝对定位的百分比是相对于父元素的宽高，所以我们可以根据这个原理将元素居中显示。但是要注意：绝对定位是基于子元素的左上角来说的，但是要想让子元素居中显示，就要解决这个问题。
此时可以利用margin的负值来实现效果，当外边距为负值时，元素向相反方向定位，这样我们将子元素的外边距设置为子元素的宽高的一半就可以实现了。

.center{
				position: relative;
			}
			.box{
				top: 50%;
				left: 50%;
				position: absolute;
				margin-top: -50px;
				margin-left: -50px;
			} 

absolute 和 calc

同样需要知道子元素的宽高。

.center{
			   position: relative;
		   }
		   .box{
			   position: absolute;
			   top: calc(50% - 50px ); 
				/* 减号前后没有空格，该样式不生效*/
			   left: calc(50% - 50px );
		   }

flex（常用）

.center{display: flex;
        justify-content: center; /*设置主轴的对齐方式*/
        align-items: center; /*设置交叉轴的对齐方式*/
        }

absolute 和 transform

不需要子元素宽高固定，但是依赖于translate2d的兼容性

.center{
position:relative;
}
.box{
position:absolute;
top: 50%;
left: 50%;
tranform:translate(-50%, -50%);
}

css-table

css新增的样式table 也能设置居中。

           .center{
				display:table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.box{
				display:inline-block;
			}

使用float实现左右对齐

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

使用padding属性设置垂直对齐

1）当对齐的行数超过单行的时候，padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。