使用CSS跨浏览器div中心对齐 [英] Cross browser div center alignment using CSS
问题描述
使用CSS水平和垂直对齐位置为相对的 div 的最简单方法是什么？ div 的宽度和高度是未知的，即它应该适用于每个 div 维度和所有主要浏览器。我的意思是中心对齐。
我想用水平对齐方式：
margin-left：auto;
margin-right：auto;像我一样
< nofollow noreferrer>此处。
这是一个很好的横向对齐的跨浏览器解决方案吗？
< <>如果元素的
宽度不足，则水平居中可能会发生。
是已知的，否则浏览器无法确定开始和结束的位置。 #content {
width：300px;
margin：0 auto;
}
这是完美的crossbrowser兼容。
只有在元素绝对定位且具有已知 height 的情况下，才能进行垂直居中。绝对定位会打破 margin：0 auto; ，所以你需要采取不同的方法。您需要将其顶部和左设置为和 50％和 margin-top 和 margin-left 至负半部 c $ c> width height 。
paste'n'runnable example：
<！doctype html>
< html lang =en>
< head>
< title> SO问题2935404< / title>
< / head>
< style>
#content {
position：absolute;
width：300px;
height：200px;
top：50％;
left：50％;
margin-left：-150px; / *负半宽度。 * /
margin-top：-100px; / *负半高度。 * /
border：1px solid＃000;
}
< / style>
< body>
< div id =content>
content
< / div>
< / body>
< / html>
也就是说，垂直居中通常很少在现实世界中应用。
如果宽度和高度事先不知道，那么你需要抓取Javascript / jQuery来设置 margin-left 和 margin-top 值，并且与客户端将看到div在页面加载过程中快速移动的事实，这可能会导致wtf？经验。
What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.
I thought to make the horizontal alignment using:
margin-left: auto;
margin-right: auto;
like I did here.
Is this a good cross browser solution for horizontal alignment ?
How could I do the vertical alignment ?
Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end.
#content {
width: 300px;
margin: 0 auto;
}
This is perfectly crossbrowser compatible.
Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.
Here's a copy'n'paste'n'runnable example:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
That said, vertical centering is usually seldom applied in real world.
If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.
这篇关于使用CSS跨浏览器div中心对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
