Question

我正在做练习，虽然我之前已经垂直居中，但在这种情况下，我无法将其置于中心位置。

$( document ).ready(function() {

// Appears the search form input
$("#search").addClass("search-init");
	
}); // $(document).ready

body {
	position: relative;
	height: 100%;
	width: 100%;
}

.search-init {
	height: 5rem;
	width: 5rem;
	border: 2px solid green;
	border-radius: 2.5rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="search">
  </div>
</body>
</html>

Answer 1

为html元素添加高度：

html { height: 100%; }

它会起作用 - 身体需要占据空间，所以给html 100％，身体可以占据100％的全高。

Answer 2

从position:relative移除body，它将位于中心

这是更新的代码

$( document ).ready(function() {

// Appears the search form input
$("#search").addClass("search-init");
	
}); // $(document).ready

body {
	/*position: relative;*/
	height: 100%;
	width: 100%;
}

.search-init {
	height: 5rem;
	width: 5rem;
	border: 2px solid green;
	border-radius: 2.5rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="search">
  </div>
</body>
</html>

Answer 3

用绝对＆＃39;声明身体姿势。

＆＃13;

$( document ).ready(function() {

// Appears the search form input
$("#search").addClass("search-init");
	
}); // $(document).ready

＆＃13;

body {
	position : absolute;
	height: 100%;
	width: 100%;
}
.search-init{
	height: 5rem;
	width: 5rem;
	border: 2px solid green;
	border-radius: 2.5rem;
    position : absolute;
    top : 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="search">
  </div>
</body>
</html>

＆＃13;

Answer 4

轻松一点。使用div代替html和boy。 HTML会喜欢这个。

<html lang="en">
    <body>
        <div class="box-table">
            <div class="box-table-cell">
                <img src="http://placehold.it/250x150/121212/ffffff?text=Vertically+center+imag" />
            </div>
        </div>
    </body>
</html>

CSS

.box-table{
    display: table;
    height: 500px;
    margin-left: auto;/* If you want to center this box */
    margin-right: auto;/* If you want to center this box */
    text-align: center;
    width: 500px;
}
.box-table{ /* This CSS for full window */
    bottom: 0;
    display: table;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;/* You can use absolute */
    right: 0;
   text-align: center;
   top: 0;
   width: 100%;
}
.box-table-cell{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    width: 100%;
}
img{
    vertical-align: middle;
}

body{
  background-color: #ff0000;
  margin: 0;
  padding: 0;
}
.box-table{
    background-color: rgba(0, 0, 0, 0.85);
    bottom: 0;
    display: table;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 17px;
    position: fixed;/* You can use absolute */
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
}
.box-table-cell{
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    width: 100%;
}
img{
    vertical-align: middle;
}

<html lang="en">
    <body>
        <div class="box-table">
            <div class="box-table-cell">
                <img src="http://placehold.it/600x350/121212/ffffff?text=Vertically+center+imag" />
            </div>
        </div>
    </body>
</html>

Answer 5

试试这个

$( document ).ready(function() {

// Appears the search form input
$("#search").addClass("search-init");
	
}); // $(document).ready

body,html {
	position: relative;
	height: 100%;
	width: 100%;
}

.search-init {
	height: 5rem;
	width: 5rem;
	border: 2px solid green;
	border-radius: 2.5rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="search">
  </div>
</body>
</html>

为什么我的顶级：50％的CSS无效？

5 个答案: