若是想把一个区块移到页面中间,即需要设置其容器为弹性容器,因为display能设置容器类型, 所以将display属性设为flex即可,并将‘justify-content’设置为center即可将区块置于容器中央 然后设置text-align,也就是文本位置,将其设置为center,然后呈现出这样的一个区块
之后只需用“line-height”把行高设成区块的高度即可
CSS代码如下
body{
display:flex;
justify-content: center;
}
#a{
line-height: 100px;
text-align: center;
background-color: red;
width: 100px;
height: 100px;
}
html代码如下
<!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>弹性标签</title>
</head>
<link rel="stylesheet" href="CSS/主程序.css" type="text/css">
<body>
<div id="a">红色</div>
</body>
</html>