如何居中图像/段落/按钮 - HTML & CSS [重复]答案

【问题标题】：How to center images/paragraphs/buttons - HTML & CSS [duplicate]如何居中图像/段落/按钮 - HTML & CSS [重复]
【发布时间】：2014-08-02 21:44:49
【问题描述】：

如何使页面上的段落、按钮居中？我是通过text-align 和centered 完成的，但我就是不知道如何将它垂直居中...我用padding 实现了它，但位置会根据分辨率而变化，我真的在寻找它在任何屏幕尺寸下都保持在“块”的中间。

我有一个 jsfiddle 向你展示我拥有的东西！ http://jsfiddle.net/82V8Y/#share

这是主要问题..

<div id="block1">
<p class="name">Portfolio</p>
<p class="title"> IT / BUSINESS / WEB</p>

<button class="cv">Download CV</button>


</div>

【问题讨论】：

这种方式适用于响应式网站，因为它使用绝对定位
你应该看看vertical-align: middle; CSS 属性
你要垂直对齐什么？

标签： html css layout center centering

【解决方案1】：

我正在尝试你的代码，你可以做到这一点，看起来很简单，

<div id="block1">
    <p class="name">Portfolio</p>
    <p class="title"> IT / BUSINESS / WEB</p>
    <p class="title">
    <button class="cv">Download CV</button>
    </p>    
</div>

<div id="block2">
    <p class="title">block 2</p>
</div>

<div id="block3">
    <p class="name">block 3</p>
</div>

我只添加了一个“p”区域，但在里面是你的 botton 尝试它并且它可以工作，对于其他人你可以复制它

您可以为其他标题创建新样式，按照您已有的逻辑更改标题的颜色或大小，标准化您的开发，是一个很好的开始方式，希望对您有所帮助！！

【讨论】：

这使按钮居中，但我现在如何将所有 3 个对象居中在 div block1 的中间
我建议您按照其他的逻辑创建一个新样式
我编辑了答案检查..

【解决方案2】：

将整个页面垂直居中并不是一个好主意。您永远不知道查看器使用什么设备（分辨率）。如果您不使用 Google 电子表格等应用程序，则页面必须保持垂直可扩展，因为内容的宽度取决于设备/浏览器。

【讨论】：