html{
margin: 0px;
padding: 0px;
}
body{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#board {
display: flex;
flex-direction: column;
height: 600px;
width: 600px;
justify-content: stretch;
align-items: stretch;
}
#board .row{
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
flex: 1;
}
.square {
background-color: red;
border: white solid 1px;
flex: 1;
justify-content: center;
align-items: center;
}
#board .row .square:hover{
background-color: yellow;
}
.square:hover:before
{
content: "O";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="board">
<div class = "row" >
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class = "row" >
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class = "row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</body>
</html>
你好，很短的问题。
刚开始使用 Flex/CSS。无法解决问题。
为什么 Flex 对齐项目：居中和对齐内容：居中不会将文本放在div 的中心。将文本放在父div中心的正确方法是什么。它应该将"O"放在父div的中心。
谢谢。
您应该将display: flex;添加到父div.(在您的情况下.square(
CSS的快速修复：
html{
margin: 0px;
padding: 0px;
}
body{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#board {
display: flex;
justify-content: stretch;
flex-direction: column;
height: 600px;
width: 600px;
align-items: stretch;
}
#board .row{
display: flex;
flex: 1;
}
.square {
background-color: red;
border: white solid 1px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
#board .row .square:hover{
background-color: yellow;
}
.row .square:hover:before
{
content: "O";
}
html{
margin: 0px;
padding: 0px;
}
body{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#board {
display: flex;
flex-direction: column;
height: 600px;
width: 600px;
justify-content: stretch;
align-items: stretch;
}
#board .row{
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
flex: 1;
}
.square {
/* just add this line */
display: flex;
background-color: red;
border: white solid 1px;
flex: 1;
justify-content: center;
align-items: center;
}
#board .row .square:hover{
background-color: yellow;
}
.square:hover:before
{
content: "O";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="board">
<div class = "row" >
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class = "row" >
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class = "row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</body>
</html>只需在.square类中添加display: flex即可按行居中(默认(您的内容，但如果说您要按列居中，您只需要在.square类中执行flex-direction: column;。