垂直和水平居中[重复]
Posted
技术标签:
【中文标题】垂直和水平居中[重复]【英文标题】: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>
【讨论】:
以上是关于垂直和水平居中[重复]的主要内容,如果未能解决你的问题,请参考以下文章