div的上下左右居中显示

yang2556925063

已于 2023-12-19 18:05:30 修改

阅读量274

点赞数

文章标签：前端 html

于 2023-11-03 17:58:13 首次发布

本文链接：https://blog.csdn.net/yang2556925063/article/details/134208234

版权

让小的div在大的div内上下左右居中
绝对定位----------【方式一：完整代码如下】

position：absolute是绝对定位，单纯的使用absolute属性并不会其效果，需要配合“top bottom left right ”属性才能看到效果

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .father {
            border:1px solid red;
			height:80px;
			width:80px;	 
        }
        .son {
           border:1px solid green;
		   height:20px;
		   width:20px;
		   color:white;
		   /*使div左右居中*/
		   margin:auto;
		   /*使div上下居中【margin-top的值是本身高度的一半的负值】*/
		   position:relative;
		   top:50%;
		   margin-top:-10px
        }
    </style>
</head>
<body style="background-color:black;">
    <div class="father" >
        <div class="son" ><font style="font-size:10px;">中间</font></div>
    </div>
</body>
</html>

相对定位---------- 第二种方式【完整代码如下：】

position: relative是设置定位类型为相对定位，它可以配合“top”、“bottom”、“left”、“right”这4个偏移量来实现相对它所属父元素的相对定位。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .father {
            border:1px solid red;
			height:80px;
			width:80px;
			position: relative;
        }
        .son {
           border:1px solid green;
		   height:20px;
		   width:20px;
		   color:white;
		   position: absolute;
            /*上下左右居中*/
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body style="background-color:black;">
    <div class="father" >
        <div class="son" ><font style="font-size:10px;">中间</font></div>
    </div>
</body>
</html>
<script>    
    
</script>