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

小小玮

于 2016-11-11 12:29:53 发布

阅读量587

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/dai_jing/article/details/53127715

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

3 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现图片及子元素在父元素内的水平和垂直居中。通过简单的HTML结构结合特定的CSS样式属性，如`position`、`margin`及`display`等，实现了元素的精确布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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