我有 2 个元素:一个日历组件和一个按钮。它们的高度/宽度不同。
如何让它们水平和垂直居中？
表？分区？ ...
我在想每个对象都有 50% 的区域并且以该区域为中心。但是，我可能愿意将它们水平居中(彼此之间有间隙)。然后将它们成对垂直居中。
最佳答案
这对我有用:http://jsfiddle.net/bpkH4/ .一些 CSS 纯粹是装饰性的。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#btn
{
background-color:#FF0000;
width:100px;
height:30px;
}
#comp
{
background-color:#00FFFF;
width:200px;
height:200px;
}
#container
{
width:500px;
height:300px;
overflow:auto;
background-color:#CCCCCC;
text-align:center;
}
.contain
{
background-color:#AAAAAA;
float:left;
width:50%;
height:100%;
position: relative;
}
.elem
{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<div id="container">
<div class="contain">
<div class="elem" id="comp">Component in Here</div>
</div>
<div class="contain">
<div class="elem" id="btn">Button</div>
</div>
</div>
</body>
</html>
关于asp.net - HTML5/CSS3 水平和垂直连续居中 2 个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13384417/