目录
前言
元素示例
1、行内元素
2、Flex布局
3、绝对定位+margin:auto
4、绝对定位（已知宽高）
5、绝对定位（未知宽高）
6、Grid布局(子元素设置)
7、Grid布局（父元素设置）
8、Table布局
总结
前言
作者：🤶马可家的菠萝
在我们日常开发中，会经常涉及到元素水平和垂直居中的需求，而元素水平和垂直居中是实现美观布局的重要手段。本文将介绍几种常见的实现水平和垂直居中的方法，并分析各自的优缺点，帮助大家更好地掌握这一技能。
元素示例
<div class="parent">
<div class="child">child</div>
</div>1、行内元素
.parent {
text-align: center; /* 文本居中 */
line-height: 200px; /* 通过行高实现垂直居中 */
height: 200px;
}
.child {
display: inline-block; /* 将子元素设为行内块，以实现宽度和高度设置 */
width: 80px;
height: 40px;
}优点
实现简单，只需设置文本居中和调整行高。
兼容性好，适用于大部分浏览器。
缺点
依赖于父元素的行高，可能需要调整字体大小或行高来达到理想的垂直居中效果。
不适用于块级元素或需要设置宽度和高度的元素。
2、Flex布局
.parent {
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.child {
width: 80px;
height: 40px;
border: 1px solid green;
}优点
方便快捷，只需设置几个属性即可实现水平和垂直居中。
易于维护，适合响应式设计。
兼容性较好，除IE10及以下版本外，其他浏览器均支持。
缺点
在IE10及以下版本浏览器中可能无法正常工作。
3、绝对定位+margin:auto
.parent {
position: relative;
height: 200px;
width: 200px;
border: 1px solid red;
}
.child {
width: 80px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid green;
}优点
可以实现水平和垂直居中。
不需要知道子元素的宽度和高度。
缺点
子元素需要设置绝对定位，可能导致与其他布局问题的冲突。
在某些情况下，可能需要清除浮动。
4、绝对定位（已知宽高）
.parent {
position: relative;
height: 200px;
width: 200px;
border: 1px solid red;
}
.child {
width: 80px;
height: 40px;
border: 1px solid green;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px; /* 高度的一半 */
margin-left: -40px; /* 宽度的一半 */
}优点
可以精确控制子元素的位置。
不需要清除浮动。
缺点
需要提前知道子元素的宽度和高度。
子元素需要设置绝对定位，可能导致与其他布局问题的冲突。
5、绝对定位（未知宽高）
.parent {
position: relative;
height: 200px;
width: 200px;
border: 1px solid red;
}
.child {
width: 80px;
height: 40px;
border: 1px solid green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}优点
可以实现水平和垂直居中。
不需要知道子元素的宽度和高度。
缺点
使用transform属性，可能影响其他元素的布局。
兼容性一般，某些浏览器可能不支持。
6、Grid布局(子元素设置)
.parent {
width: 600px;
height: 200px;
border: 1px solid red;
display: grid;
}
.child {
justify-self: center;
align-self: center;
border: 1px solid pink;
}优点
方便快捷，只需设置几个属性即可实现水平和垂直居中。
易于维护，适合响应式设计。
兼容性较好，除IE10及以下版本外，其他浏览器均支持。
缺点
在IE10及以下版本浏览器中可能无法正常工作。
7、Grid布局（父元素设置）
.parent {
width: 600px;
height: 200px;
border: 1px solid red;
display: grid;
place-items: center
}
8、Table布局
.parent {
width: 600px;
height: 200px;
border: 1px solid red;
display: table;
}
.child {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
}优点
实现简单，只需设置display为table和table-cell。
兼容性好，适用于大部分浏览器。
缺点
表格布局可能会引起其他布局问题。
不适用于现代前端开发的复杂布局。
总结
综上所述，Flex布局和Grid布局在现代浏览器中表现优秀，是更推荐的选择。而行内元素方式、绝对定位+margin:auto方式、绝对定位（已知宽高）方式和Table布局方式在特定情况下可能适用。绝对定位（未知宽高）方式在实际应用中较少使用。在实际开发中，请根据需求和兼容性选择合适的方式。
