我对ASP.Net和与Web开发相关的任何事物都是新手。观看了一些视频,并了解了基本概念。

我现在遇到的问题是,我想将视图居中到页面中心。

举例来说,我在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>

最佳答案

您将必须指定容器的高度。看一下这个:

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


希望这可以帮助?

10-05 21:01
查看更多