html css 원소의 수평 가운데, 수직 가운데를 실현하는 전면적인 방법

하나.수평 가운데
------------------------------------------------------------------------------
html 중의 행내 요소와 블록급 요소는 어떤 것들이 있습니까?
html에서 원소는 주로 행내 원소와 블록급 원소로 나뉜다.
줄 안의 원소는 쓰기가 끝난 후에 자동으로 줄을 바꾸지 않고 원소의 넓이와 높이가 없다는 것을 말한다.
블록 레벨 요소는 쓰기가 끝나면 자동으로 행이 바뀌고 너비가 있으면 수정할 수 있습니다.
또 하나의 특수한 원소를 인라인 블록 원소라고 부른다.
대략적인 분간은 다음과 같다.
인라인 요소는 다음과 같습니다. heda meat title lable span br a style em b i strong
블록급 요소는 다음과 같습니다. body from select textarea h1-h6 html table button hr p ol ul dl cnter div
인라인 블록 요소는 다음과 같습니다. img input td
------------------------------------------------------------------------------
테스트된 html 코드
<
div
class=
"box"
>
<
a
class=
"blog"
href=
""
> 추구자의 블로그.csdn.net/example440982
a
>
<
div
class=
"blog2"
> 추구자의 블로그.csdn.net/example440982
div
>
<
p
> 추구자의 블로그.csdn.net/example440982
p
>
<
img
src=
"text.png"
width=
"50"
height=
"50"
>
div
>
css 스타일
(1) 인라인 요소 솔루션
인라인 요소를 Block의 부모 요소로 둘러싸고 부모 요소를 다음과 같은 속성을 추가하면 됩니다.
 

.box {
text-align:
center;
}
(2) 블록 요소 솔루션
 

.box {
width:
200px;
/* 너비를 설정해야 유효*/
margin:
0
auto;
}
(3) 여러 블록 요소 솔루션은 요소의 display 속성을 inline-block으로 설정하고 부모 요소의 text-align 속성을center로 설정하면 됩니다.
 

.box {
text-align:
center;
}
.child {
display:
inline-block;
}
(4) 여러 개의 블록 요소 솔루션(flexbox 레이아웃으로 실현)은 flexbox 레이아웃을 사용하고 처리할 블록 요소의 부모 요소에 속성 디스플레이:flex 및justify-content:center를 추가하면 됩니다.
 

.level-center {
display:
flex;
justify-content:
center;
}
둘.수직 가운데
(1) 단일 행의 인라인 요소 솔루션 a 태그 세로 가운데 맞춤

.box {
background:
#ccc;
height:
240px;
}
.box a {
line-height:
240px;
}
(2) 여러 줄의 인라인 요소 솔루션 조합은 display:table-cell과vertical-align:middle 속성을 사용하여 가운데에 있어야 하는 요소의 부모 용기 요소 생성 효과를 정의한다. 다음과 같다.

.box {
background:
#ccc;
width:
300px;
height:
300px;
/*요소를 수직으로 가운데 맞춤*/
display:
table-cell;
vertical-align:
middle;
}
(3) 고도로 알려진 블록 요소 솔루션
 

.box {
position:
relative;
width:
300px;
height:
300px;
background:
pink;
}
.blog2 {
position:
absolute;
height:
100px;
background:
#ccc;
top:
50%;
margin-top:
-50px;
/*자체 높이의 절반으로 여백 설정*/
padding:
0;
}
셋.수평 수직 가운데
(1) 높이와 너비를 알고 있는 요소 솔루션 1 흔치 않은 가운데 맞춤 방식으로 방안 2보다 지능적이고 다음과 같은 지능적인 방법입니다.

.blog2 {
position:
absolute;
width:
300px;
height:
200px;
background:
#ccc;
margin:
auto;
top:
0;
left:
0;
right:
0;
bottom:
0;
}
(2) 알려진 높이 및 너비의 요소 솔루션2

.blog2 {
position:
absolute;
width:
300px;
height:
200px;
background:
#ccc;
top:
50%;
left:
50%;
margin-top:
-100px;
/*박스 자체 높이의 절반*/
margin-left:
-150px;
/*상자 자체 너비의 절반*/
}
(3) 알 수 없는 높이 및 너비 요소 솔루션

.blog2 {
position:
absolute;
/* width: 300px;
height: 200px; */
background:
#ccc;
top:
50%;
left:
50%;
transform:
translate(
-50%,
-50%);
}
(4) flex 레이아웃으로 실현

.box {
display:
flex;
justify-content:
center;
align-items:
center;
background:
#ccc;
height:
200px;
}