什么是布局
html页面的整体结构或框架
布局是设计思想而不是技术内容
[布局方式]
水平方向中央配置
垂直中央配置
中央位置(水平垂直)
什么是水平中央配置
水平居中布局元素相对于页面/元素相对于父元素水平居中[实现方法]
组合使用inline-block text-align属性
注意：“优点”浏览器兼容的“缺点”文本对齐属性具有继承性，因此子元素的文本居中**解决方法：在子元素中重新设置文本对齐属性以复盖父元素的文本对齐属性**
*{
margin: 0；
padding: 0；
}
. parent {
width: 100%；
高： 200 px；
背景色： # 00 ffff；
/*方法结合inline-block text-align属性，将text-align属性添加到父元素，将display属性添加到子元素
- text-align属性可设置文本内容的方式
left:左对齐
中心：居中对齐
right:右对齐
*/
文本对齐3360中心；
}
. child {
width: 300px；
高： 200 px；
背景色： # ff 0000；
/* display属性：
- block:区块级元素
- inline:内联元素(文本对齐有效) () ) ) ) ) ) ) ) )。
width和height属性无效
- inline-block:内联块元素(块级内联) ) ) ) ) )。
*/
display :在线区块；
}
与table margin属性一起使用注意事项：如果只需设置“优点”子元素即可水平居中[缺点]子元素偏离文档流，则margin属性将被禁用。解决方案：请考虑第一个或第三个解决方案
“扩展”如何在CSS中使元素脱离文档流
将元素设置为浮动浮动
将元素设置为绝对位置position: absolute
将元素设置为固定位置position :固定
*{
margin: 0；
padding: 0；
}
. parent {
width: 100%；
高： 200 px；
背景色： # 00 ffff；
}
. child {
width: 300px；
高： 200 px；
背景色： # ff 0000；
/*方法组合使用gtable margin属性*/
/*显示的值为table或block */
显示：表；
/* margin属性：外部距离
-一个值：上下左右
上下、左右两个值
自动基于浏览器自动分配
-上、左右、下3个值
-上、右、下、左4个值
*/
margin : 0自动；
}
与absolute transform属性一起使用
注意： [优点]父元素离开文档流不会影响子元素的水平居中对齐效果。 “缺点”变换属性对CSS 3中新添加的属性浏览器支持不充分。 **解决方法：请考虑第一个或第二个解决方法。 **
* {
margin: 0；
padding: 0；
}
. parent {
width: 100%；
高： 200 px；
背景色： # 00 ffff；
/*相对定位*
position: relative；
}
. child {
width: 300px；
高： 200 px；
背景色： # ff 0000；
/*将当前元素设置为绝对位置后
-如果没有为父元素设置锚点，则当前元素相对于页面定位
-如果父元素设置了定位
前元素是相对于父级元素定位的*/
position: absolute;
left: 50%;
/* 水平方向平移 */
transform: translateX(-50%);
/* margin-left: -50%; */
}
... ...
什么是垂直居中布局
垂直居中布局 ：当前元素相对于页面/父元素垂直方向是居中显示的 [ 实现方式 ]
table-cell + vertical-align 属性配合使用 注：[优点] 浏览器的兼容性比较好 [缺点] vertical-align 属性 具有继承性 导致子级元素的文本居中显示 **如果父级元素中包含除子级元素以外的文本内容，此方法不适用 **
* {
margin: 0;
padding: 0;
}
.parent {
/*方法一： table-cell + vertical-align 属性配合使用 */
width: 200px;
height: 600px;
background-color: #00ffff;
/* display 属性：
- table: 设置当前元素为
- table-cell：设置当前元素为
元素 单元格- 设置完成以后 作为子级元素的div就相当于单元格中的内容了，设置对齐方式即可
*/
display: table-cell;
/*
vertical-align 属性: 用于设置文本内容的垂直方向的定对齐方式
- top： 顶部对齐
- middle: 居中对齐
- bottom: 底部对齐
*/
vertical-align: middle;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
}
absolute + transform 属性配合使用 注：[优点] 无论父级元素是否脱离文档流，不影响子级元素的垂直居中的效果 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好 **解决方法：考虑第一种解决方案 **
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 600px;
background-color: #00ffff;
position:relative;
}
/* 方法二： absolute + transform 属性配合使用 */
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
position: absolute;
top: 50%;
/* 垂直方向 */
transform: translateY(-50%);
}
什么是居中布局
居中布局：( 水平 + 垂直 )居中 [ 实现方式 ]
display:block + margin 属性实现水平方向居中，table-cell + vertical-align 属性实现垂直方向居中 注：[优点] 浏览器兼容性比较好 [缺点] 父元素与子元素都需要增加代码
* {
margin: 0;
padding: 0;
}
.parent {
width: 1000px;
height: 600px;
background-color: #00ffff;
/* 实现垂直居中 */
/*
*/display: table-cell;
vertical-align: middle;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 实现水居中 */
/*
/* display: table; */
display: block;
margin: 0 auto;
}
absolute + transform 属性实现水平和垂直方向的居中 注：[优点] 无论父级元素是否脱离文档流，不影响子级元素的垂直居中的效果，不考虑浏览器兼容性，优于第一中方案 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好同时子父元素都增加了代码
* {
margin: 0;
padding: 0;
}
.parent {
width: 1000px;
height: 600px;
background-color: #00ffff;
/* 相对定位 不脱离文档流*/
position:relative;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 绝对定位 ———— 子绝父相 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* transform: translateX(-50%);
transform: translateY(-50%); */
}
原文出处：https://www.cnblogs.com/serdy/p/11779479.html