参见英文答案 >
How to center an element horizontally and vertically?10个
我正在以父div为中心的图标(垂直和水平).我的页面上有很多不同大小的父div,所以我希望能够按比例将图标放在每个父div的中心.这是一个JSFiddle的问题：
我正在以父div为中心的图标(垂直和水平).我的页面上有很多不同大小的父div,所以我希望能够按比例将图标放在每个父div的中心.这是一个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;
}
解决方法
由于它们已经是内嵌块子元素,因此您可以在父项上设置text-align：center,而无需设置宽度或边距：0px auto on the child.这意味着它将适用于具有不同宽度的动态生成的内容.
.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：中间假设显示：table-cell设置在父项上.
