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>[더 CSS 시리즈를 읽어 볼 CSS 연구 노트 ]