In CSS, centered layout is the way we often need to use, here are some of the commonly used method of centering
1, the text is centered
(1) the text is centered horizontally
<!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) Text vertical center
<!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) Text vertical center
<!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, a block frame centering
(1) the level of the middle block box
<!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) block box centered vertically
<!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) block box centered horizontally and vertically
<!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>[Read More CSS series, see the CSS study notes ]