Question

以下代码显示了徽标及其背景。我无法将徽标垂直居中。是因为背景div没有定义高度吗？如何使背景始终为屏幕尺寸的100％并带有居中徽标？

＆＃13;

body {
  margin: 0;
}
#header {
  min-height: 100%;
  width: 100%;
  position: absolute;
  background-color: #CCC;
}
.logo {
  max-width: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
}

＆＃13;

<div id="header">
  <img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>

＆＃13;

Answer 1

使用absolute position作为图片，使用div和top定位到left的中心，然后使用{{1}将其移回一半}

有代码

＆＃13;

transform:translate

＆＃13;

html,body {
  margin: 0;
  height:100%;
}
#header {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #CCC;
}
.logo {
  display: block;
  position: absolute;
  top:50%; left:50%;   /*positing top left corner of image to center*/
  transform: translate(-50%, -50%); /* move left and up for 1/2 of image */
}

＆＃13;

fiddle example有<div id="header"> <img class="logo" src="http://lorempixel.com/100/50/abstract/3/"> </div>

Answer 2

html, body {
  margin: 0;
  height: 100%;
}
#header {
  min-height: 100%;
  width: 100%;
  position: relative;
  background-color: #CCC;
}
.logo {
  margin: 0 auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: 1px solid blue;
}

<div id="header">
  <img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>

Answer 3

您可以在.logo课程中使用此方法进行垂直居中。但是，您最常定义父高度才能使其生效。

.logo {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 50%; /* Added Code */
    transform: translateY(-50%); /* Added Code */
    }

如何在全屏div中垂直和水平居中img？

3 个答案: