元素和文本的居中在css中是入门的考察点。元素在盒子内部水平居中或者垂直居中，文本在盒子内部水平居中或者垂直居中都是很关键的考察点。加上移动端和PC端适配，就是基本的CSS考察点。在面试过程中这个是一个最基本的问题，需要每时每刻熟练记忆。好了，下面上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background-color: greenyellow;
display: flex;
justify-content: center;
align-items: center;
/* 块级元素水平垂直居中 */
}
.center {
width: 100px;
background-color: lightblue;
height: 100px;
line-height: 100px;
text-align: center;
/* 文本垂直居中 */
/* margin: 0 auto; */
/* vertical-align: center; */
}
</style>
</head>
<body>
<div class="main">
<div class="center">
文字居中
</div>
</div>
</body>
</html>
这个图片就是基本的实现效果。小盒子在大盒子内部水平居中垂直居中，文本在小盒子内部水平居中垂直居中。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
