場景：
包含在子元素中的文字在父元素中，水平垂直居中。
- 文字只有一行的情況下：
程式碼
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中原始方法-只有一行文字</title>
<style>
.container {
height: 50px;
line-height: 50px;
background-color: yellow;
text-align: center;
/*vertical-align: middle;*/
}
</style>
</head>
<body>
<div class="container">
<div>this is text</div>
</div>
</body>
</html>
複製程式碼展示：
- 需要指定子元素寬高情況下
程式碼
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中原始方法-多行文字1</title>
<style type="text/css">
.container {
position: relative;
background-color: #a0b3d6;
height: 400px;
width: 400px;
}
.inner-box {
position: absolute;
top: 50%;
left: 50%;
height: 150px;
width: 150px;
margin-left: -75px;
margin-top: -75px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-box">
this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text
</div>
</div>
</body>
</html>
複製程式碼現象：
- 無需指定子元素寬高情況下：
程式碼：
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中原始方法-多行文字2</title>
<style type="text/css">
.container {
position: relative;
background-color: #a0b3d6;
height: 400px;
width: 400px;
}
.inner-box {
position: absolute;
height: 150px;
width: 150px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-box">
this is textthis is textthis is textthis is textthis is textthis is textthis is text this is text
</div>
</div>
</body>
</html>
複製程式碼現象： 同上
- 使用自適應flex佈局方法
程式碼：
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中原始方法-flex方法</title>
<style type="text/css">
.dad{
border: 1px solid red;
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
</style>
</head>
<body class="dad">
<span>this is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is texthis is text</span>
</body>
</html>
複製程式碼現象：
總結：
其實，父元素完全可以指定body標籤，這樣相當於指定div的寬為100vw，高為100vh