水平和垂直居中容器 div
Posted
技术标签:
【中文标题】水平和垂直居中容器 div【英文标题】：Center container div horizontally and vertically 【发布时间】：2015-09-16 21:49:38 【问题描述】：目前我正在开发一个包含四行的网站。我想在水平居中已经完成的地方水平和垂直居中容器。
有人可以帮帮我吗？我已经尝试过使用“display: flex”，但它仍然不起作用。
我正在使用 Twitter Bootstrap 和 Font Awesome。
https://jsfiddle.net/L9dbzgpr/
代码：
<div class="container text-center">
<div class="row">
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-desktop"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-music"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-cloud"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-3"> <a href="https://www.youtube.com/" target="_blank"><i class="fa fa-5x fa-youtube-play"></i></a>
</div>
<div class="col-sm-3"> <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-5x fa-facebook"></i></a>
</div>
<div class="col-sm-3"> <a href="https://soundcloud.com/" target="_blank"><i class="fa fa-5x fa-soundcloud"></i></a>
</div>
<div class="col-sm-3"> <a href="https://www.google.ch/" target="_blank"><i class="fa fa-5x fa-google"></i></a>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-3"> <a href="https://instagram.com/accounts/login" target="_blank"><i class="fa fa-5x fa-instagram"></i></a>
</div>
<div class="col-sm-3"> <a href="https://www.dropbox.com/" target="_blank"><i class="fa fa-5x fa-dropbox"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-twitter"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-desktop"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-music"></i></a>
</div>
<div class="col-sm-3"> <a href="#" target="_blank"><i class="fa fa-5x fa-cloud"></i></a>
</div>
</div>
</div>
CSS：
@charset "UTF-8";
/********** General styles **********/
body
font-size: 16px;
background: url('../media/images/banner.jpg') no-repeat center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
position: relative;
a, a:focus, a:active
text-decoration: none;
color: #F9F9F9;
opacity: 0.7;
a>.fa:hover, a:hover
-webkit-transition: all .5s ease;
transition: all .5s ease;
transform: scale(1.2);
opacity: 1;
.container
margin: 0 auto; /* horizontally centered */
.margin-top
margin-top: 3em;
我的解决方案更新： html：
@charset "UTF-8";
/********** General styles **********/
html, body
height: 100%;
margin: 0;
body
font-size: 16px;
background: url('../media/images/banner.jpg') no-repeat center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
a, a:focus, a:active
text-decoration: none;
color: #F9F9F9;
opacity: 0.7;
a>.fa:hover, a:hover
-webkit-transition: all .5s ease;
transition: all .5s ease;
transform: scale(1.2);
opacity: 1;
.wrapper
display: table;
height: 100%;
margin: 0 auto;
.wrapper-inner
display: table-cell;
vertical-align: middle;
.margin-top
margin-top: 3em;
.col-sm-3
padding-right: 4em;
padding-left: 4em;
CSS：
@charset "UTF-8";
/********** General styles **********/
html, body
height: 100%;
margin: 0;
body
font-size: 16px;
background-color: blue;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
a, a:focus, a:active
text-decoration: none;
color: #F9F9F9;
opacity: 0.7;
a>.fa:hover, a:hover
-webkit-transition: all .5s ease;
transition: all .5s ease;
transform: scale(1.2);
opacity: 1;
.wrapper
display: table;
height: 100%;
margin: 0 auto;
.wrapper-inner
display: table-cell;
vertical-align: middle;
.margin-top
margin-top: 3em;
.col-sm-3
padding-right: 4em;
padding-left: 4em;
【问题讨论】：
Best way to center a <div> on a page vertically and horizontally?的可能重复 您能给我们发个链接或复制问题吗？ 当然：jsfiddle.net/L9dbzgpr @bazzlebrush 【参考方案1】：帕特里克 F，您好。 看看只是使用它来居中两种方式。
.center
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
在您的代码中，您使用 col-sm-3 我将其更改为 col-xs-3 以阻止所有显示项目在小屏幕中垂直排列 1 行。除非那是你想要发生的事情。
调整窗口大小，你会明白我的意思。
这里是 Fiddle。
【讨论】：
嗨@AngularJR，感谢您的帮助！小提琴中的符号不在中间（橙色和符号之间的间距）。我在我的问题中上传了我的解决方案。 嗨，橙色块只是为了表明它在两个方向的中心。您现在需要做的是将正确的 padding 添加到项目/符号中，以便它们均匀地适应宽度/高度。然后它们将出现居中。您需要将包含所有这些符号的div 居中，就像我在这里为您所做的那样。这是否有助于您在此处获得所需的视图。【参考方案2】：
如果您不知道容器的高度和宽度，您可以使用此样式将元素水平和垂直居中：
.container
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
但我不知道这是否有其他不良影响。
【讨论】：
感谢@Sebastian，但我已经尝试过了，它有不想要的效果......它只显示页面顶部的最后两行以上是关于水平和垂直居中容器 div的主要内容，如果未能解决你的问题，请参考以下文章