Question

我是ASP.Net的新手，与网络开发有关。观看了一些视频并获得了基本想法。

我现在遇到的问题是我希望将我的观点集中在页面的中心。

举个例子，我在vs2015中创建了一个新的ASP.Net MVC项目。我创建了一个新视图，我的视图看起来像这样。

@{
    ViewBag.Title = "Test Page";
}

<div>
   <button>Click me</button
</div>

我希望按钮在水平和垂直方向都位于屏幕的中心。我如何实现这一目标？

我在网上看了几乎所有我能找到的东西，但似乎没什么用。

编辑：对卢克的充分信任，他指出了我正确的方向。

在位于Content文件夹中的Site.css中，我添加了以下内容。

.centerStuff {
   position: absolute;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

现在我的观点看起来像这样。

@{
    ViewBag.Title = "Test Page";
}

<div class="centerStuff">
   <button>Click me</button
</div>

Answer 1

您必须指定容器的高度。看看这个：

body{
  position:relative;
  height:100%;
}
.full-height{
  text-align:center;
  display:table;
  height:300px;//this is just and example height
  width:100%;
  border:1px solid red;
}
.center{
  display:table-cell;
  vertical-align:middle;
   height:100%;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  <div class="full-height">
    <div class="center">test</div>
  </div>    
  </body>
</html>

要设置.full-height div的高度，你需要通过javascript获取窗口的高度，然后像这样设置它（下面的例子使用jQuery）：

var winHeight = window.innerHeight;//gets height of window
$('.full-height').css('height':winHeight+'px');//sets the div height

希望这有帮助吗？

HTML / CSS居中控制到屏幕

1 个答案: