在屏幕中央定位元素(Positioning element at center of screen)

编程入门 行业动态 更新时间:2024-10-25 02:31:31
在屏幕中央定位元素(Positioning element at center of screen)

我想在屏幕中央放置一个<div> (或<table> )元素,不管屏幕尺寸如何。 换句话说,留在“顶”和“底”的空格应相等,“右”和“左”两边的空格应相等。 我只想用CSS完成这个。

我尝试了以下,但它不工作:

<body> <div style="top:0px; border:1px solid red;"> <table border="1" align="center"> <tr height="100%"> <td height="100%" width="100%" valign="middle" align="center"> We are launching soon! </td> </tr> </table> </div> </body>

注意: 如果<div>元素(或<table> )与网站滚动不是一样好。 只需要在页面加载时居中。

I want to position a <div> (or a <table>) element at the center of the screen irrespective of screen size. In other words, the space left on 'top' and 'bottom' should be equal and space left on 'right' and 'left' sides should be equal. I would like to accomplish this with only CSS.

I have tried the following but it is not working:

<body> <div style="top:0px; border:1px solid red;"> <table border="1" align="center"> <tr height="100%"> <td height="100%" width="100%" valign="middle" align="center"> We are launching soon! </td> </tr> </table> </div> </body>

Note: It is either way fine if the <div> element (or <table>) scrolls with the website or not. Just want it to be centered when the page loads.

最满意答案

简单的方法,如果你有一个固定的宽度和高度:

#divElement{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; }​

请不要使用内联样式! 这是一个工作示例http://jsfiddle.net/S5bKq/ 。

The easy way, if you have a fixed width and height:

#divElement{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; }​

Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.

更多推荐

本文发布于:2023-08-08 00:34:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1466750.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:元素   屏幕   中央   Positioning   center

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!