<div>元素在页面中垂直和水平的最佳方法?
我知道左边距:auto;margin-right:汽车;会以水平方向为中心，但是垂直方向的最佳方法是什么呢?
当前回答
另一个答案是这样的。
<div id="container">
<div id="centered"> </div>
</div>
还有css:
#container {
height: 400px;
width: 400px;
background-color: lightblue;
text-align: center;
}
#container:before {
height: 100%;
content: '';
display: inline-block;
vertical-align: middle;
}
#centered {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
}
其他回答
虽然我太晚了，但这很简单。页面中心总是向左50%，顶部50%。减去div width和height的50%设置左右边距。希望它适用于所有地方
身体{ 背景:# EEE; ｝ .center-div { 位置:绝对的; 宽度:200 px; 高度:60 px; 左:50%; margin-left: -100 px; 上图:50%; margin-top: -30 px; 背景:# CCC; 颜色:# 000; text-align:中心; ｝ < div class = " center-div”> <h3>这是中心div</h3> < / div >
我在看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>
结果如下所示:
实际上有一个解决方案，使用css3，它可以垂直居中一个未知高度的div。诀窍是将div向下移动50%，然后使用transformmy将其移回中间。唯一的前提条件是要居中的元素有一个父元素。例子:
<div class="parent">
<div class="center-me">
Text, images, whatever suits you.
</div>
</div>
.parent {
/* height can be whatever you want, also auto if you want a child
div to be responsible for the sizing */
height: 200px;
}
.center-me {
position: relative;
top: 50%;
transform: translateY(-50%);
/* prefixes needed for cross-browser support */
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
所有主流浏览器和ie9及以上版本都支持(别担心ie8，因为它在今年秋天和winxp一起死了。感谢上帝)。
JS小提琴演示
这个解决方案对我很有效
.middleDiv{
position : absolute;
height : 90%;
bottom: 5%;
}
(或高度:70% /底部:15%
高度:40% /底部:30%…)
我喜欢的方法是将一个盒子垂直和水平居中，是以下技术:
外容器
应有显示:表;
内容器
应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;
内容框
应该有显示:inline-block; 应该重新调整水平文本对齐，如。text-align:左;或者text-align: right;，除非你想让文本居中
这种技术的优雅之处在于，你可以将你的内容添加到内容框中，而不用担心它的高度或宽度!
Demo
body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; /* This could be ANY width */ height: 100%; /* This could be ANY height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> You can put anything here! </div> </div> </div>
看看这小提琴!
EDIT
是的，我知道你可以通过transform实现或多或少相同的灵活性:translate(-50%， -50%);或者transform: translate3d(-50%，-50%， 0);，我建议的技术有更好的浏览器支持。即使使用浏览器前缀，如-webkit， -ms或-moz, transform也不能提供完全相同的浏览器支持。
所以如果你关心旧的浏览器(例如。IE9及以下版本)，您不应该使用transform进行定位。
