html - 将元素放在 div 的中心

Question

这可能是个愚蠢的问题，但我无法理解它。如何将元素(社交媒体图标)水平放置在中心，即使调整窗口大小也不会破坏它们？ 这是一个标记:

<div class="mob_social">
<p1>Your friends might want to fix their iPhones.</p1>
<div class="mob_icon">
    <ul>
        <li><a href="http://www.facebook.com/">
                    <img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
<li><a href="https://www.instagram.com">
                    <img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
 <li><a href="https://www.twitter.com">
                    <img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh">

                </a>
        </li>
    </ul>
</div>    

我总是很困惑，犹豫要不要问这个问题。我只是想知道如何做到这一点。这是我用图标创建的 fiddle 。目前图标是垂直的，但是如何将它们水平放置在页面中央:

http://jsfiddle.net/msLuzrye/

Answer 1

这是一个带有水平对齐图标和位于页面中心的整个容器 div 的 fiddle 。

http://jsfiddle.net/msLuzrye/5/

这里有两个主要技巧。我正在展示你的 <li>元素为 inline-block然后使用 CSS 转换使您的 parent 居中 <div>垂直。对于父div，定位absolute和 top: 50%将 div 的顶部放在页面的中间位置。 CSS 转换是相对于元素本身的，所以 transform: translateY(-50%)将您的元素拉回页面自高度度的一半，从而实现完美的垂直居中。

您可以检查浏览器对 CSS 转换的支持 here .