bootstrap中有没有一个类可以让元素内容，可以在屏幕上，上下左右都居中显示？-慕课网

首页课程实战体系课手记专栏慕课教程

bootstrap中有没有一个类可以让元素内容，可以在屏幕上，上下左右都居中显示？

来源：2-8 文本对齐风格

长孙同学

2016-04-15 11:14

我觉得要是有这样一个类会很方便啊，可惜text-center只能让元素内容左右居中显示。

写回答关注

6回答

vaneX: 2016-10-11 12:44:49

已采纳

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>绝对屏幕居中</title>
  <!-- Boostrap -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="">
  <!-- 以下两个插件是对IE8及以下版本浏览器支持html5元素和媒体查询 -->
  <!-- [if lt IE 9] -->
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <!-- [endif] -->
</head>
<body>
  <div id="d1" style="position: fixed; width: 100px; height: 100px; background-color: green;">我要永远居中</div>
  <div style="text-align: center; margin: 0 auto; height: 5000px; background-color: red"></div>

  <script type="text/javascript">
    function getClientWidth()
    {
      var clientWidth=0;
      if(document.body.clientWidth&&document.documentElement.clientWidth)
      {
        clientWidth = (document.body.clientWidth<document.documentElement.clientWidth)?document.body.clientWidth:document.documentElement.clientWidth;
      }
      else
      {
        clientWidth = (document.body.clientWidth>document.documentElement.clientWidth)?document.body.clientWidth:document.documentElement.clientWidth;
      }
      return clientWidth;
    }
    function getClientHeight()
    {
      var clientHeight=0;
      if(document.body.clientHeight&&document.documentElement.clientHeight)
      {
        clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
      }
      else
      {
        clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
      }
      return clientHeight;
    }
    var d1 = document.getElementById("d1");
    d1.style.left = getClientWidth()/2 - 50 + "px";
    d1.style.top = getClientHeight()/2 - 50 + "px";
  </script>

  <!-- 若果要使用Boostrap的js插件，必须先调入jQuery -->
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

貌似没有，只能自己先写

position: Fixed;

0 1

qq_爺的话不听也要听_04124898

2016-11-28 17:27:25

自己写啊text-align:center;vertical-align: middle;

0 0
啊啊啊啊123

2016-09-14 20:37:51

text-align: center;
margin: 0 auto;

0 0
卡迪亚兹

2016-04-15 18:00:13

好像是需要用jquery动态获取屏幕的高度。

0 0
长孙同学

2016-04-15 11:49:28

看了下源代码，没找到，sad~ 那么问题又来了，怎么写这样一个类呢？

0 0
天生不适合搞技术

2016-04-15 11:38:15

好像没有

0 0