美文网首页
利用css实现盒子固定在浏览器居中显示

利用css实现盒子固定在浏览器居中显示

作者: oopsWeb | 来源:发表于2021-05-23 12:44 被阅读0次

html+css实现在浏览器居中显示下面有两种方法,个人更推荐第一种利用transform方法实现居中

一、利用固定定位属性让盒子相对浏览器上左移动各50%,再上左移动自身50%

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 200px;
      background: pink;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
</head>

<body>
  <div></div>
</body>

二、利用定位和margin强制性居中显示

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 200px;
      background: pink;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  </style>
</head>

<body>
  <div></div>
</body>

相关文章

  • 利用css实现盒子固定在浏览器居中显示

    html+css实现在浏览器居中显示下面有两种方法,个人更推荐第一种利用transform方法实现居中 一、利用固...

  • CSS解决盒模型居中的问题

    CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种:...

  • css实现盒子内部 div水平垂直居中

    总结一下利用css实现盒子内部 div居中的几种方法 1.水平居中 1)margin: 0 auto 2.水平垂直...

  • Day5:html和css

    Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义。然...

  • 2022css面试题总结

    H5 的新特性 css3 新特性 div 盒子居中 css 的弹性盒模型和怪异盒模型 css 实现三角形 浏览器兼...

  • 元素垂直居中

    不固定宽度的盒子的水平居中 HTML 方法一: display: table-cell;CSS 方法二: 定位 固...

  • CSS布局

    HTML CSS + DIV实现整体布局必备知识利用HTML和CSS实现常见的布局 单列布局 css 实现竖直居中...

  • CSS3 2D变形

    利用 transform 使定位盒子居中对齐 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形...

  • 【css图片垂直居中】让html img图片垂直居中的三种方法

    一、使用flex实现垂直居中 利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择,因为IE8...

  • html编程技巧

    字体外部描边 Css 基于flex布局的盒子上下居中 Css 基于flex布局的盒子左右居中 Css 基于flex...

网友评论

      本文标题:利用css实现盒子固定在浏览器居中显示

      本文链接:https://www.haomeiwen.com/subject/qewijltx.html