<div>元素在页面中垂直和水平的最佳方法?
我知道左边距:auto;margin-right:汽车;会以水平方向为中心，但是垂直方向的最佳方法是什么呢?
当前回答
如果你正在研究新的浏览器(IE10+)，
然后你可以使用transform属性在中心对齐一个div。
<div class="center-block">this is any div</div>
这个的css应该是:
.center-block {
top:50%;
left: 50%;
transform: translate3d(-50%,-50%, 0);
position: absolute;
}
这里的问题是，您甚至不必指定div的高度和宽度，因为它会自行处理。
同样，如果你想把一个div放在另一个div的中心，那么你可以指定外部div的相对位置，然后这个CSS开始为你的div工作。
工作原理:
当您将left和top指定为50%时，div将位于页面的右下四分之一，其左上端固定在页面的中心。 这是因为，左/顶部属性(当以%给出时)是基于外部div(在您的情况下，窗口)的高度计算的。
但是transform使用元素的高度/宽度来决定转换，因此div将向左移动(50%宽度)和向上移动(50%高度)，因为它们是以负号给出的，因此将其对齐到页面的中心。
如果你必须支持旧的浏览器(抱歉，包括IE9)，那么表格单元格是最流行的方法。
其他回答
我在看Laravel的视图文件，注意到他们完美地将文本居中。我立刻想起了这个问题。 他们是这样做的:
<html>
<head>
<title>Laravel</title>
<!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->
<style>
.container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;
}
.inside {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="inside">This text is centered</div>
</div>
</body>
结果如下所示:
如果你知道div的定义大小，你可以使用calc。
实例:https://jsfiddle.net/o8416eq3/
注意:只有当你在CSS中硬编码了' ' div '的宽度和高度时，这才有效。
目标# { 位置:固定; 顶部:calc(50vh - 100px/2); 左:calc(50vw - 200px/2); 宽度:200 px; 身高:100 px; 背景颜色:红色; ｝ < div id = '目标' > < / div >
下面是我之前写的一个脚本(它是用jQuery库写的):
var centerIt = function (el /* (jQuery element) Element to center */) {
if (!el) {
return;
}
var moveIt = function () {
var winWidth = $(window).width();
var winHeight = $(window).height();
el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
};
$(window).resize(moveIt);
moveIt();
};
这个解决方案对我很有效
.middleDiv{
position : absolute;
height : 90%;
bottom: 5%;
}
(或高度:70% /底部:15%
高度:40% /底部:30%…)
是浏览器支持的，使用翻译功能强大。
position: absolute;
background-color: red;
width: 70%;
height: 30%;
/* The translate % is relative to the size of the div and not the container*/
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);
