将div居中放置在根据window.innerWidth和window.innerHeight调整大小的画布顶部
将div居中放置在根据window.innerWidth和window.innerHeight调整大小的画布顶部
提问于 2018-08-29 02:41:58
我正试着在画布背景的中间添加一些文字。我有最困难的时间来弄清楚如何在IT上添加一个div，它将通过更改分辨率来保持位置。
首先，这里是我的画布的大小。
var canvas = document.getElementById('first-canvas');
var ctx = canvas.getContext('2d');
initialize()
function initialize() {
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
}
function redraw() {
ctx.strokeStyle = 'black';
ctx.lineWidth = '5';
ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
redraw();
}html,
body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
margin: 0px;
border: 0;
/* No floating content on sides */
}
body {
overflow-x: hidden;
}
#btn-container {
display: flex;
justify-content: center;
text-align: center;
}
#first-canvas {
background-color: #393939;
overflow: hidden;
position: relative;
}
#scroll-btn {
display: flex;
justify-content: center;
text-align: center;
position: absolute;
top: 0px;
margin: 0;
padding: 0;
font-color: white;
border: solid 2px white;
width: 250px;
height: 75px;
}<section class="canvas">
<canvas id="first-canvas" style="position:relative; left: 0px; top: 0px;"></canvas>
<a href="#">
<div id="btn-container">
<div id="scroll-btn">
<h3>View My Page></h3>
</div>
</a>
</div>
<section>
基本上，我想在画布的中间添加一个div，这样我就可以添加一些欢迎文本并维护我的scroll-btn。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-29 03:01:18
html,
body {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
margin: 0px;
border: 0;
/* No floating content on sides */
}
body {
overflow-x: hidden;
}
#btn-container {
display: flex;
justify-content: center;
text-align: center;
}
#first-canvas {
background-color: #393939;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#scroll-btn {
display: flex;
justify-content: center;
text-align: center;
margin: 0;
padding: 0;
font-color: white;
border: solid 2px white;
width: 250px;
height: 75px;
}
.canvas {
width: 100%;
height: 100%;
position: relative;
}
a {
display: block;
position: absolute;
z-index: 1;
top: calc(100% - 37.5px);
left: calc(100% - 125px);
}
h3 {
margin: auto;
}Stack Overflow用户
发布于 2018-08-29 04:52:47
我找到了一个很棒的答案！
div {
background:green;
position:fixed;
color:#fff;
width:50px;
height:50px;
top:50%;
left:50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52064404
复制相关文章
相似问题