居中<div>

Question

晚上好，

我正在尝试将“联系人详细信息”div居中。我使用下面的代码但是在使用 position：fixed 后，它看起来并不像是居中。还有另一种方法可以让它在使用位置时完美居中：固定？我想保持div居中，同时向上和向下滚动。任何帮助将不胜感激，谢谢！

.secondary {
	height: 350px;
	width: 400px;
	background-color: #ccc;
	box-shadow: 5px 5px 5px #000;
	margin-top: 200px;
	position: fixed;
	margin-left: 40%;
}

<section class="secondary">
	<h3>Contact Details</h3>
	  <ul class="contact-info">
	    <li class="phone"><a href="tel:###-###-####">###-###-####</a></li>
		<li class="mail"><a href="mailto:e************@gmail.com"             target="_blank">e************@gmail.com</a></li>
		<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=ec#######" target="_blank">@ec*******</a></li>
		<li class="linkedin"><a href="http://linkedin.com/in/e####-######-8a791988" target="_blank">Edwin Castro</a></li>
	</ul>
</section>

Answer 1

由于您为div使用固定尺寸而不是使其响应，您可以使用：

.secondary {
    height: 350px;
    width: 400px;
    background-color: #ccc;
    box-shadow: 5px 5px 5px #000;
    position: fixed;
    margin-left: -200px;
    margin-top: -175px;
    left: 50%;
    top: 50%;
}

所有这一切都是将元素移动到中心，然后使用负边距将其拉回到其总宽度/高度的一半，使其完全居中。

这感觉就像是一种过时的方法。如果您确实想要做出响应，那么您可以尝试以下方式：

.secondary {
    height: 350px;
    width: 100%;
    max-width: 400px;
    background-color: #ccc;
    box-shadow: 5px 5px 5px #000;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

它可能无法为您提供所需的精确造型，但它会让您走上正确的道路。

Answer 2

试试这个。将.secondary替换为：）

.secondary {
    background-color: #ccc;
    box-shadow: 5px 5px 5px #000;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 40px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}