CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?
- 王林앞으로
- 2020-03-23 10:31:132631검색
CSS에서 수직 센터링을 달성하는 방법은 다음과 같습니다:
1. 라인 높이를 사용하여 센터링을 달성합니다.
<!-- css -->
<style>
.parents {
height: 400px;
line-height: 400px;
width: 400px;
border: 1px solid red;
text-align: center;
}
.child {
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>효과:
: CSS 튜토리얼 )
2. 상위 컨테이너의 상대 위치를 설정하면 하위 항목이 절대 위치를 설정하고 레이블은 여백을 통해 적응적으로 중앙에 배치됩니다. 레이아웃 flex 상위 설정 표시: flex; 하위는 적응형 중심화를 달성하기 위해 여백을 자동으로 설정합니다.
4 상위는 상대 위치를 설정하고, 하위는 변위 변환을 통해 달성됩니다. 
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: blue;
/* 四个方向设置为0, 然后通过margin为auto自适应居中 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body> 효과:
5. 부모는 유연한 상자를 설정하고 유연한 상자의 관련 속성을 설정합니다. 
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: flex;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background-color: yellow;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>효과:
6. 양식을 생성한 다음 자식은 인라인 또는 인라인 블록을 설정합니다. (수직 정렬을 사용하기 위한 전제 조건은 중간에 인라인 요소와 표시 값이 table-cell인 요소라는 점에 유의해야 합니다.) 
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>관련 영상 튜토리얼 추천: 
css 영상 튜토리얼
위 내용은 CSS에서 수직 센터링을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제