div中的中心图标 - 水平和垂直[重复]

Posted 2023-03-05

【中文标题】div中的中心图标 - 水平和垂直[重复]

【英文标题】：Center icon in a div - horizontally and vertically [duplicate]

【发布时间】：2013-10-08 02:08:28

【问题描述】：

我在父 div 中将图标（垂直和水平）居中时遇到问题。我的页面上有许多大小不同的父 divs，因此我希望能够按比例将图标放置在每个父 div 的中心。这是问题的 JSFiddle：

JsFiddle

HTML

<div class="img_container">
  <i class="icon-play-circle"></i>
</div>
<br>
<div class="img_container2">
  <i class="icon-play-circle"></i>
</div>

CSS

.img_container
    width:100px;
    height:100px;
    position:relative;
    background:red;


.img_container2
    width:100px;
    height:50px;
    position:relative;
    background:blue;


.icon-play-circle
    position:absolute;
    top:45%;
    left:45%;
    color: white;

【参考方案1】：

这是一种在任何情况下都可以将内容垂直和水平居中的方法，当您不知道宽度或高度或两者时，这很有用：

CSS

#container 
    display: table;
    width: 300px; /* not required, just for example */
    height: 400px; /* not required, just for example */


#update 
    display: table-cell;
    vertical-align: middle;
    text-align: center;

HTML

<div id="container">
    <a id="update" href="#">
        <i class="icon-refresh"></i>
    </a>
</div>

JSFiddle

请注意，此处的宽度和高度值仅用于演示，您可以将它们更改为您想要的任何值（或完全删除它们），它仍然可以工作，因为这里的垂直居中是table-cell 方式的产物显示属性有效。

【参考方案2】：

由于它们已经是inline-block 子元素，您可以在父元素上设置text-align:center，而不必在子元素上设置width 或margin:0px auto。这意味着它将适用于具有不同 widths 的动态生成的内容。

.img_container, .img_container2 
    text-align: center;

这将使孩子在两个 div 容器中居中。

更新：

对于垂直居中，假设图标的高度已知，您可以使用calc() 函数。

.img_container > i, .img_container2 > i 
    position:relative;
    top: calc(50% - 10px); /* 50% - 3/4 of icon height */

jsFiddle demo - 有效。

对于它的价值 - 你也可以使用 vertical-align:middle 假设 display:table-cell 设置在父级上。

【讨论】：

这不是让孩子水平居中（而不是垂直居中吗？）

是的，很抱歉我没有澄清。主要问题是让它垂直居中。

@scientiffic 我更新了它以包含 calc() jsfiddle.net/aHUtM/6 假设图标的高度是已知的。

谢谢，乔希，我不知道 calc！效果很好。你能把它添加为答案，我会标记它是正确的吗？

我猜这是“最好的”解决方案。 :D

【参考方案3】：

水平居中很简单：

text-align: center

当容器为已知高度时垂直居中：

height: 100px;
line-height: 100px;
vertical-align: middle

当容器不是已知高度时垂直居中并且您可以在背景中设置图像：

background: url(someimage) no-repeat center center;