垂直和水平居中[重复]

Posted 2023-03-05

【中文标题】垂直和水平居中[重复]

【英文标题】：Vertical and horizontal centering [duplicate]

【发布时间】：2012-05-11 02:37:42

【问题描述】：

可能重复：Best way to center a <div> on a page vertically and horizontally?

我有一个画布元素，我希望它位于页面的正中心，无论是垂直还是水平。

我是一名程序员，我对 CSS 了解不多。任何人都可以帮助我将画布垂直和水平居中吗？

这是我当前的 CSS 代码：

/* Set up canvas style */
#canvas 
  font-family: 'pixel';
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: 1px solid black;
  cursor: none;
  outline: none;

它已经水平居中，但不是垂直居中，提前谢谢！

【问题讨论】：

请您提供更多代码（html）

没有通用的方法。如果您知道项目和父项的高度，则可以计算。我认为 CSS 失败了。即使是 CSS 3 也无法处理简单的布局要求。

如果您的元素高度不会改变，这真的很容易。 （这是一个问题！）

我做了纯css，解决方案不依赖于块的大小

【参考方案1】：

这应该可以解决问题：

#canvas 
    position: absolute;
    top: 50%; left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;

上边距和左边距必须是元素高度和宽度的一半的负数。

如果您不知道宽度和高度并需要使用 javascript 计算，则同样适用。只需获取宽度/高度，将它们除以一半，然后以与上面示例相同的方式将值设置为边距。

希望有帮助:)

【讨论】：

只有在事先知道元素高度的情况下才有效。如果不是等到渲染的时候，就只能用JavaScript获取高度，然后设置margin的inline了。

@Adam，我让 purecss 成为可能

不，你没有——正如我所指出的，只有事先知道元素的高度，你才能做到这一点。你也设置了 100 像素，因此你知道这一点。

【参考方案2】：

我不知道这是否会有所帮助，但我编写了这个 jQuery 插件可能会有所帮助。我也知道这个脚本需要调整。它会在需要时调整页面。

(function($)
    $.fn.verticalCenter = function()
        var element = this;

        $(element).ready(function()
            changeCss();

            $(window).bind("resize", function()
                changeCss();
            );

            function changeCss()
                var elementHeight = element.height();
                var windowHeight = $(window).height();

                if(windowHeight > elementHeight)
                
                    $(element).css(
                        "position" : 'absolute',
                        "top" : (windowHeight/2 - elementHeight/2) + "px",
                        "left" : 0 + "px",
                        'width' : '100%'
                    );
                
            ;
        );

    ;
)(jQuery);


$("#canvas").verticalCenter();

---

精炼代码+演示

请以“整页”模式查看此演示。

(function($) 
  $.fn.verticalCenter = function(watcher) 
    var $el = this;
    var $watcher = $(watcher);
    $el.ready(function() 
      _changeCss($el, $watcher);
      $watcher.bind("resize", function() 
        _changeCss($el, $watcher);
      );
    );
  ;
  function _changeCss($self, $container) 
    var w = $self.width();
    var h = $self.height();
    var dw = $container.width();
    var dh = $container.height();
    if (dh > h) 
      $self.css(
        position: 'absolute',
        top: (dh / 2 - h / 2) + 'px',
        left: (dw / 2 - w / 2) + 'px',
        width: w
      );
    
  
)(jQuery);

$("#canvas").verticalCenter(window);

$(function() 
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  drawSmile(ctx, 0.9, 'yellow', 'black', 0.75);
);

function drawSmile(ctx, scale, color1, color2, smilePercent) 
  var x = 0, y = 0;
  var radius = canvas.width / 2 * scale;
  var eyeRadius = radius * 0.12;
  var eyeXOffset = radius * 0.4;
  var eyeYOffset = radius * 0.33;
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.beginPath(); // Draw the face
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = color1;
  ctx.fill();
  ctx.lineWidth = radius * 0.05;
  ctx.strokeStyle = color2;
  ctx.stroke();
  ctx.beginPath(); // Draw the eyes
  ctx.arc(x - eyeXOffset, y - eyeYOffset, eyeRadius, 0, 2 * Math.PI, false);
  ctx.arc(x + eyeXOffset, y - eyeYOffset, eyeRadius, 0, 2 * Math.PI, false);
  ctx.fillStyle = color2;
  ctx.fill();
  ctx.beginPath(); // Draw the mouth
  ctx.arc(0, 0, radius * 0.67, Math.PI * (1 - smilePercent), Math.PI * smilePercent, false);
  ctx.stroke();
  ctx.restore();

#canvas 
  border: 3px dashed #AAA;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="canvas"  ></canvas>