在 CSS 中，居中对齐是我们常常需要用到的布局方式，下面介绍一些常用的居中方法
1、文字居中
（1）文字水平居中
<!DOCTYPE html>
<html>
<head>
<style>
.box {
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 {
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 {
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 {
500px;
height: 300px;
background: black;
border: 1px solid black;
}
.item {
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 {
500px;
height: 300px;
background: black;
border: 1px solid black;
position: relative; /* 设置 position 为 relative */
}
.item {
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 {
500px;
height: 300px;
background: black;
border: 1px solid black;
display: flex; /* 使用 Flex 布局 */
flex-direction: row; /* 设置主轴沿着水平方向 */
justify-content: center; /* 设置沿着主轴对齐方式 居中对齐 */
align-items: center; /* 设置沿交叉轴对齐方式 居中对齐 */
}
.item {
100px;
height: 100px;
background: gray;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】