用CSS垂直居中一个元素

Question

我想在我的div中垂直居中内容。

HTML：

<div id="header"> 
     <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div> 
     <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div> 
    </div> 

CSS：

@media only screen and (min-width: 768px) { 
     .col-sm-1 {width: 8.33%; float: left;} 
     .col-sm-2 {width: 16.66%; float: left;} 
     .col-sm-3 {width: 25%; float: left;} 
     .col-sm-4 {width: 33.33%; float: left;} 
     .col-sm-5 {width: 41.66%; float: left;} 
     .col-sm-6 {width: 50%; float: left;} 
     .col-sm-7 {width: 58.33%; float: left;} 
     .col-sm-8 {width: 66.66%; float: left;} 
     .col-sm-9 {width: 75%; float: left;} 
     .col-sm-10 {width: 83.33%; float: left;} 
     .col-sm-11 {width: 91.66%; float: left;} 
     .col-sm-12 {width: 100%; float: left;} 


    } 

* { 
    color: #2c2c2c; 
    height: 100%; 
    width: 100%; 
    margin: 0 !important; 
    font-family: 'Raleway'; 
} 

#header { 
    height: 10%; 
    background-color: #2c2c2c; 
    color: #c4c3c3; 
    font-family: 'title'; 
} 

#logo-img { 
    height: 80%; 
    width: auto; 

} 

#logo-img-div { 

} 


#logo-text { 
    color: #c4c3c3; 

} 

我想中心徽标IMG-DIV和标志文字的内容，但保留那些两个div上的标题内容的左侧。我发现了很多类似的问题，但没有任何解决方案可行。

Answer 1

您正在将属性应用于所有带*的选择器。 http://www.w3schools.com/cssref/css_selectors.asp 由于您的保证金为0，因此无法对齐div元素。

通常情况下，你可以使用 保证金左或右，并提出数PX的或EM公司的...

Answer 2

尽量去除余量（*）的元素。由于边距是所有其他元素（包括身体本身）之间的距离，因此不允许您对齐它们。或者你可以有一个利润率仅为左，右：

* { 
    color: #2c2c2c; 
    height: 100%; 
    width: 100%; 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    font-family: 'Raleway'; 
} 

如果你试图用“头”的ID垂直居中的DIV试试这个：

#header{ 
    position: relative; 
    top: 40%; 
    height:10% 
    background-color: #2c2c2c; 
    color: #c4c3c3; 
    font-family: 'title'; 
} 

试图找到高度你的元素的％，所以你可以从50％的测量中减去它们。这使得你的元素将完美居中。 在这种情况下，由于高度设置为10％，50％会转换为10％。

Answer 3

使用flex来对齐子项目。哦，你可能不想在的一切上设置高度和宽度为100％。

@media only screen and (min-width: 768px) { 
 
    .col-sm-1 {width: 8.33%; float: left;} 
 
    .col-sm-2 {width: 16.66%; float: left;} 
 
    .col-sm-3 {width: 25%; float: left;} 
 
    .col-sm-4 {width: 33.33%; float: left;} 
 
    .col-sm-5 {width: 41.66%; float: left;} 
 
    .col-sm-6 {width: 50%; float: left;} 
 
    .col-sm-7 {width: 58.33%; float: left;} 
 
    .col-sm-8 {width: 66.66%; float: left;} 
 
    .col-sm-9 {width: 75%; float: left;} 
 
    .col-sm-10 {width: 83.33%; float: left;} 
 
    .col-sm-11 {width: 91.66%; float: left;} 
 
    .col-sm-12 {width: 100%; float: left;} 
 
} 
 

 
* { 
 
    color: #2c2c2c; 
 
    margin: 0; 
 
    font-family: 'Raleway'; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
#header { 
 
    height: 10%; 
 
    background-color: #2c2c2c; 
 
    color: #c4c3c3; 
 
    font-family: 'title'; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#logo-img { 
 
    height: 80%; 
 
    width: auto; 
 
} 
 

 
#logo-text { 
 
    color: white; 
 
}

<div id="header"> 
 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div> 
 
</div>