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

最新推荐文章于 2023-03-28 11:35:49 发布

小小玮

最新推荐文章于 2023-03-28 11:35:49 发布

阅读量543

点赞数

分类专栏： web开发技术文章标签： css设置垂直水平居中

本文链接：https://blog.csdn.net/dai_jing/article/details/53127715

版权

web开发技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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;

小小玮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 实现水平居中和垂直水平都居中

.father{ width:500px; height:500px; position:relative; background-color: aquamarine; } .son{ width:100px; height
复制链接

扫一扫