我如何垂直和水平居中所有这些元素？

Posted 2023-03-05

【中文标题】我如何垂直和水平居中所有这些元素？

【英文标题】：How do I vertically and horizontally center all these elements?

【发布时间】：2014-01-12 02:48:31

【问题描述】：

我想创建一个标题区域，它的左右两边都有上一个和下一个箭头按钮，同时在标题区域的中间有一些标题文本。诀窍是我还希望标题区域内的所有三个元素也垂直居中，无论标题文本元素是否太长以至于它导致它具有比箭头链接更大的高度。

这是我想要达到的目标的粗略草图：

在顶部版本中，箭头（黑框）比标题文本高，但在底部版本中，文本比箭头高。在所有情况下，我都希望所有内容都垂直居中，并且标题文本水平居中（我的图片中没有显示）。

目前，这是我想出的最好的 html/CSS，但我知道缺少一些东西，我不确定它是什么。

HTML：

<div class="container">
  <a href="#" class="prev"></a>
  <h1>Header text</h1>
  <a href="#" class="next"></a>
</div>

CSS：

.container 
  display: table;


.prev, .next 
  background: #000;
  display: table-cell;
  height: 50px;
  vertical-align: middle;
  width: 20px;


.prev 
  float: left;


.next 
  float: right;


h1 
  display: table-cell;
  margin: 20px;
  text-align: center;
  vertical-align: middle;

谁能提供一些关于我应该如何更改我的 HTML/CSS 以获得我想要的东西的建议？谢谢。

【参考方案1】：

如何制作容器position:relative 并绝对定位箭头？

.containerposition:relative;
.prev, .next 
    background: #000;
    height: 50px;
    width: 20px;
    position:absolute;
    top:50%;
    margin-top:-25px;

.prev left:0;
.next right:0;
h1 
    text-align: center;
    padding:0;
    margin:0;
    margin:0 20px;

演示地址 http://jsfiddle.net/gaby/M4crZ/1/

---

最初的尝试没有使文本垂直居中...

试试这个更好

.containerposition:relative;display:table;border:1px solid #ccc;
.prev, .next 
    background: #000;
    height: 50px;
    width: 20px;
    position:absolute;
    top:50%;
    margin-top:-25px;

.prev left:0;
.next right:0;
h1 
    text-align: center;
    padding:0 20px;
    margin:0;
    display:table-cell;
    vertical-align:middle;

http://jsfiddle.net/gaby/M4crZ/3/的演示

【讨论】：

好答案。因为我给我的箭头一个设定的高度，这会很好。非常感谢。

出于好奇，如果我不为箭头设置固定高度，解决方案会完全不同和/或更困难吗？

@HartleySan 如果可以使用 CSS3 属性，那么您可以使用 transform:translateY(-50%)，它是动态的并且会做同样的事情。请参阅 jsfiddle.net/gaby/M4crZ/4（我在链接，所以它们有一定的高度..)

非常酷。我不知道那个属性的那个把戏。谢谢。