元素居中的5中方法简介

最新推荐文章于 2023-08-13 00:34:20 发布

web前端999

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量204

点赞数

本文链接：https://blog.csdn.net/Nickname2020/article/details/84977491

版权

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
       /*1、flex布局居中
       .box{width: 300px;height: 300px;background: black;margin: 0 auto;display: flex;align-items: center;justify-content: center;}
       .box1{width: 50px;height: 50px;background: red;}*/
       /*2、定位布局*/
       /*.box{position:relative;width: 300px;height: 300px;background: black;margin: 0 auto;}
       .box1{width: 50px;height: 50px;background: red;position:absolute;top:50%;left: 50%;margin-top: -25px;margin-left: -25px;}*/
       /*3、margin计算差值居中*/
       /*.box{width: 300px;height: 300px;background: black;margin: 0 auto;border: 1px solid red;}
       .box1{width: 50px;height: 50px;background: red;margin: 0 auto;margin-top: 125px;}*/
       /* 4、magin+padding计算差值居中*/
       /*.box{width: 300px;height: 300px;background: black;margin: 0 auto;padding-top: 125px;box-sizing: border-box;}
       .box1{width: 50px;height: 50px;background: red;margin: 0 auto;}*/
       /* 5、padding计算差值居中*/
       .box{width: 300px;height: 300px;background: black;margin: 0 auto;padding-top: 125px;padding-left: 125px; box-sizing: border-box;}
       .box1{width: 50px;height: 50px;background: red;}
   </style>
</head>
<body>
   <div class="box">
       <div class="box1"></div>
   </div>
</body>
</html>

web前端999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
元素居中的5中方法简介

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; /*1、flex布局居中 .box{width: 300px;height: 300px;background: black;margi
复制链接

扫一扫