放一个div盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS居中</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="parent">
<span class="child">content</span>
</div>
</body>
</html>
行内元素
水平居中
1.text-align: center。
.parent{
background-color: rgb(233, 227, 227);
text-align: center;
}
效果如下：
2.fit-center。
.parent{
background-color: rgb(233, 227, 227);
width:fit-content;
margin: auto;
}
父元素宽度自适应子元素宽度
垂直居中
1.line-height（只适用于单行文本）
.parent{
height: 200px;
line-height: 200px;
background-color: rgb(233, 227, 227);
}
块级元素
水平居中
1.margin:0 auto;。
.parent{
height: 200px;
line-height: 200px;
background-color: rgb(233, 227, 227);
}
2770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
