CSS样式表实现居中布局

居中布局
1.水平方向居中：
a.inline-block + text-aligin 组合实现水平方向居中
*HTML代码
实现子集元素的水平方向居中效果

*CSS样式
.parent{
text-aligin: center;
}
.child{
display: inline-block;
}
*问题
*由于使用text-aligin属性，导致文本内容也是想水平居中
*由于使用inline-block值，导致存在行内块级元素的问题
b.table + margin 组合实现水平方向居中效果
*HTML代码
实现子集元素的水平方向居中效果

*CSS样式
.child{
display: block 或 table;
margin: 0 auto;
}
*问题
*当前实现水平居中的元素不能脱离文档流
*当前实现水平居中的元素的宽度不能是父级元素宽度的100%
*优势
*仅对当前实现水平方向居中的元素进行设置，而不对父级元素做任何操作
c.absolute + transform组合实现水平方向居中
*第一种情况 – 父级元素不是
*HTML代码
实现子集元素的水平方向居中效果

*CSS样式
.parent{
position: relative;//开启定位
}
.child{
position:absolute;//绝对定位
left: 50%;
transform: translateX(-50%);
}
*第二种情况 -父级元素就是
*HTML代码
实现子级元素的水平方向居中效果

*CSS样式
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
*问题
*如果父级元素不是的话，必须为父级元素开启定位
*绝对定位脱离文档流
*优势
*相对比margin方式实现水平居中更灵活
d.relative + transform 组合实现水平方向居中
*HTML代码

*CSS样式
.child{
position: relative;//相对定位
left: 50%;
transform: translateX(-50%);
}
*优势
*与当前元素的父级元素没有任何关系
*当前元素没有脱离文档流
2.垂直方向居中
a.table-cell + vertical-align组合实现垂直方向居中
*HTML代码
实现子集元素的垂直方向居中效果

*CSS样式
.parent{
display: table-cell;//相当于元素
vertical-aligin: middle;
}
*问题
*实现垂直方向居中的元素，为其父级元素设置相应的样式
*父级元素的高度不能是实现垂直方向居中元素的高度
b absolute + transform组合实现垂直方向居中
*HTML代码
实现子集元素的垂直方向居中效果

*CSS样式
.parent{
position: relative;//开启定位
}
.child{
position:absolute;//绝对定位
top: 50%;
transform: translateY(-50%);
}
*问题
*如果父级元素不是的话，必须为父级元素开启定位
*绝对定位脱离文档流
C d.relative + transform 组合实现垂直方向居中
*HTML代码

*CSS样式
.child{
position: relative;//相对定位
top: 50%;
transform: translateY(-50%);
}