首页 > 网页制作  > 前端开发

温故而知新之CSS篇-盒子水平垂直居中的方法

admin 前端开发 2021-04-26 16:00:16  
后台-系统设置-扩展变量-手机广告位-内容正文底部

盒子水平垂直居中的方法
(1)使用定位的方法(三种方法):
第一种方法:(已知盒子的宽高,需要计算盒子的宽高)

<body>
    <div class="father">
      <div class="son">儿子</div>
    </div>
</body>
<style>
      .father{
        position: relative;
        /* 这一步是为了让son基于father定位 */
        width: 500px;
        height:300px;
        border: 1px solid blue;  
      }
      .son{
        position: absolute;
        left: 50%;  
        top: 50%;
        /* 到这一步为止,son的左上角是在father里面垂直居中的 */
        margin-left: -100px; 
        margin-top: -50px;
        /* 这里是为了让son的中心位置在father中垂直居中,所以取了son宽高的一半。 */
        width: 200px;
        height: 100px;
        background-color: pink;
      }
    </style>

第二种方法:(盒子必须要有宽高,但是不需要计算宽高)

 .son{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 100px;
        background-color: pink;
      }

第三种方法:(不需要知道盒子的宽高)

.son{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: pink;
      }

在这里插入图片描述

(2)使用display:flex的方法:

.father{
        display: flex;
        justify-content: center;
        /* x轴 */
        align-items: center;
        /* y轴 */
        width: 500px;
        height:300px;
        border: 1px solid blue;  
      }
      .son{
        width: 200px;
        height: 100px;
        background-color: pink;
      }

(3)使用JavaScript的方法:

<body>
    <div class="father" id="box">
      js实现垂直居中
    </div>
    <script>
      let HTML = document.documentElement;
      windowW = HTML.clientWidth;
      windowH = HTML.clientHeight;
      boxW = box.offsetWidth;
      boxH = box.offsetHeight;
      console.log(boxH)
      box.style.position = "absolute";
      box.style.left = (windowW-boxW)/2+'px';
      box.style.top = (windowH-boxH)/2+'px';
    </script>
  </body>
  <style>
  body{
        position: relative;
      }
  #box {
        width: 200px;
        height: 100px;
        background-color: pink ;
      }</style>

文章来源:https://blog.csdn.net/weixin_49175902/article/details/116124464

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/wyzz/c0ffac0baf5e2cad3bff2b2e6ab1efcc.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码