标签：居中 flex 各种 color height width css row
1. 内部容器居中 flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<style>
body {
width: 100vw;
height: 100vh;
}
.parent{
width: 100%;
height: 100%;
background-color: #E2A1E266;
/* 弹性布局，使内部的容器居中 */
display: flex;
flex-direction: row;
/* 下面这俩是水平居中还是竖直居中取决于上面的 flex-direction 是row 还是column */
align-items: center;
justify-content: center;
}
.child{
background-color: #A2A1E266;
}
</style>
<body>
<div class="parent">
<div class="child">
这是一个需要居中显示的div
</div>
</div>
</body>
</html>
Result：
2. 文字居中 text-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body style="width:100vw; height: 100vh; background-color: #9999DC80">
<div style="width: 80px; text-align: center; background-color: #DC999980">
<span>这是一段测试文字居中的</span>
</div>
</body>
</html>
Result:
标签：居中,
flex,
各种,
color,
height,
width,
css,
row
From： https://www.cnblogs.com/echo-lovely/p/17221367.html