在 CSS 中，居中对齐是我们常常需要用到的布局方式，下面介绍一些常用的居中方法
1、文字居中
（1）文字水平居中
<!DOCTYPE html> <html> <head> <style> .box { width: 500px; height: 300px; border: 1px solid black; text-align: center; /* 设置文字居中对齐 */ } </style> </head> <body> <div class="box"> <p class="item">我居中啦<br/>我居中啦</p> <p class="item">我也居中啦</p> </div> </body> </html>
（2）文字垂直居中
<!DOCTYPE html> <html> <head> <style> .box { width: 500px; height: 300px; border: 1px solid black; display: table-cell; /* 设置元素生成框的类型为 表格单元 */ vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐 */ } </style> </head> <body> <div class="box"> <p class="item">我居中啦<br/>我居中啦</p> <p class="item">我也居中啦</p> </div> </body> </html>
（3）文字垂直居中
<!DOCTYPE html> <html> <head> <style> .box { width: 500px; height: 300px; border: 1px solid black; line-height: 300px; /* 设置 lin-height 属性，值与 height 属性相等 */ } .item { margin: 0; /* 设置 margin 值为 0，防止偏移 */ padding: 0; /* 设置 padding 值为 0，防止偏移 */ display: inline-block; /* 设置元素生成框的类型为 行内块框 */ vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐 */ line-height: 24px; /* 设置行高，覆盖父元素设置 */ } </style> </head> <body> <div class="box"> <p class="item">我居中啦<br/>我居中啦</p> <p class="item">我也居中啦</p> </div> </body> </html>
2、块框居中
（1）块框水平居中
<!DOCTYPE html> <html> <head> <style> .box { width: 500px; height: 300px; background: black; border: 1px solid black; } .item { width: 100px; height: 100px; background: gray; border: 1px solid white; margin: 0 auto; /* 设置外边距，上下外边距为 0，左右外边距为 auto（自动居中处理） */ } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
（2）块框垂直居中
<!DOCTYPE html> <html> <head> <style> .box { width: 500px; height: 300px; background: black; border: 1px solid black; position: relative; /* 设置 position 为 relative */ } .item { width: 100px; height: 100px; background: gray; border: 1px solid white; position: absolute; /* 设置 position 为 absolute */ top: 50%; /* 距离定位元素顶部 50% */ transform: translateY(-50%); /* 沿着 Y 轴反向偏移 50% */ } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
（3）块框水平、垂直居中
<!DOCTYPE html> <html> <head> <style> .box { width: 500px; height: 300px; background: black; border: 1px solid black; display: flex; /* 使用 Flex 布局 */ flex-direction: row; /* 设置主轴沿着水平方向 */ justify-content: center; /* 设置沿着主轴对齐方式 居中对齐 */ align-items: center; /* 设置沿交叉轴对齐方式 居中对齐 */ } .item { width: 100px; height: 100px; background: gray; border: 1px solid white; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
