CSS布局练习(一)
练习要求：让div水平垂直居中，同时子级元素p居中显示。
最终，页面显示效果如下图：
HTML文件如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- <link rel="author" href="humans.txt">-->
</head>
<body>
<script src="js/main.js"></script>
<div id="center-round-button">
<p>MY WORLD</p>
</div>
</body>
</html>实现：
方法一：div使用absolute，p使用relative
div中插入如下代码，注意line-height与height相对应
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
line-height: 400px;
width: 400px;
height: 400px;同时，p设置为：
position: relative;
margin: auto;
扫一扫
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
