Question

我有一个div元素，我以百分比边距为中心：

ie。 left: 30%;

问题是，在较大的分辨率上，这会变得不对齐和丑陋。

如何在仅使用CSS的情况下使用窗口计算方法来保持我的div元素在所有分辨率期间始终完全居中？

请注意：元素定位已固定！

Answer 1

这将使您的元素始终以任何屏幕分辨率为中心。

 $(document).ready(function () {
        var img = document.getElementById("image1");
        // filters
        var grayValue = "0.2";
        var blurValue = "1px";
        var brightnessValue = "150%";
        var saturateValue = "0.2";
        var contrastValue = "0.2";
        var sepiaValue = "0.2";
        // `filterVal`
        var filterVal = "grayscale(" + grayValue + ") "
                        + "blur(" + blurValue + ") "
                        + "brightness(" + brightnessValue + ") "
                        + "saturate(" + saturateValue + ") "
                        + "contrast(" + contrastValue + ") "
                        + "sepia(" + sepiaValue + ")";
        // set `img` `filter` to `filterVal`
        $(img)
        .css({
            "webkit-filter": filterVal,
            "moz-filter": filterVal,
            "ms-filter": filterVal,
            "o-filter": filterVal
        });
        function downloadCanvas(link, canvas, filename) {
            link.href = document.getElementsByTagName(canvas)[0].toDataURL();
            link.download = filename;
        }

        document.getElementById('download').addEventListener('click', function () {
            html2canvas(document.body, {
                onrendered: function (canvas) {
                    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)
                    window.location.href = image;
                }
            });

        }, false);
});

.centered {
      position: fixed;
      left: 50%;
      top:50%;
      transform: translateX(-50%, -50%);
  }

Answer 2

使用视口宽度和高度会有帮助吗？

示例左侧30％的窗口宽度：

left:30vw;

让我知道它是否有效！

Answer 3

这可以确保您的元素水平居中，无论其父级的尺寸，位置或宽度如何：

＆＃13;

.el {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
 }

＆＃13;

<div class="el">Always horizontally centered</div>

＆＃13;

Answer 4

由于您的元素为position:fixed，因此请使用水平变换将其恢复为 true 中心。

使用X变换，无论宽度如何，都可以将其恢复到中心位置。这是有利的，因为没有变换，你必须明确声明元素的宽度，然后给它一个宽度的一半的负边距。

如果你问我，工作太多了。另外，固定宽度会让你陷入困境。

所有主要浏览器 except for Opera Mini and IE8 都支持此2D转换方法。

<div>Element</div>

div {
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  display: block;
  background: red;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto;
  text-align: center;
}

https://jsfiddle.net/27b94jh3/7/

Answer 5

对于新浏览器，flexbox始终是一个选项：

＆＃13;

.container {
  position:fixed;
  width:100%;
  display:flex;
  justify-content:center;
}

.spacer {
  height:2000px; 
}

＆＃13;

<div class="container">
  Always Centered
</div>
<div class="spacer"></div>

＆＃13;

我为间距添加了div来演示滚动。

无论分辨率

5 个答案: