bootstrap中有没有一个类可以让元素内容，可以在屏幕上，上下左右都居中显示？
我觉得要是有这样一个类会很方便啊，可惜text-center只能让元素内容左右居中显示。
6 回答
<!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/150
提交
取消
