您的位置：首页 > Web前端 > CSS

css 实现水平居中和垂直水平都居中

2016-11-11 12:29 309 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{
width:500px;
height:500px;
position:relative;
background-color: aquamarine;
}
.son{
width:100px;
height:100px;
position: absolute;
background-color: antiquewhite;
top:0;
left:0;
right:0;
bottom: 0;
margin:auto;
text-align: center;
font-size: 3em;
font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
}
img{
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
<img src="m1.png" width="100" height="100">
</div>
</body>
</html>

说明：

1，上图图片水平居中，关键要设置

margin:0 auto; //自动填充

display:block;//因为img是行内元素，不占据空间，所以强制设置为块级元素

2.son 垂直水平都居中，关键需要设置：

father设置

position:relative;//相对定位

son设置:

position:absolute;

margin:auto;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css设置垂直水平居中

相关文章推荐

新的分享

章节导航

css 实现水平居中 和 垂直水平都居中

css 实现水平居中和垂直水平都居中