使用 CSS 垂直和水平对齐（居中和居中）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5421334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical and horizontal align (middle and center) with CSS
提问by SilverLight
I am practicing CSS and I am so confused about how can I force my divelement to be center (verticallyand horizontally) at my page (mean which way or ways for cross browser compatibility)?
我正在练习 CSS，我很困惑如何强制我的div元素在我的页面上居中（vertically和horizontally）（意味着跨浏览器兼容性的方式）？
Best regards!
此致！
回答by sgokhales
There are many methods :
有很多方法：
- Center horizontal and vertical align of an element with fixed measure
- 具有固定度量的元素的中心水平和垂直对齐
CSS
CSS
<div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>
2 . Center horizontally and vertically a single line of text
2 . 水平和垂直居中一行文本
CSS
CSS
<div style="width:400px;height:200px;text-align:center;line-height:200px;">
<!–content–>
</div>
3 . Center horizontal and vertical align of an element with no specific measure
3 . 没有特定度量的元素的居中水平和垂直对齐
CSS
CSS
<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–>
</div>
</div>
More here :Horizontal and Vertical Alignment in CSS
更多信息：CSS 中的水平和垂直对齐
回答by Greg
This blog postdescribes two methods of centering a div both horizontally and vertically. One uses only CSS and will work with divs that have a fixed size; the other uses jQuery and will work divs for which you do not know the size in advance.
这篇博文描述了两种水平和垂直居中 div 的方法。一个只使用 CSS 并且可以处理具有固定大小的 div；另一个使用 jQuery 并将处理您事先不知道大小的 div。
I've duplicated the CSS and jQuery examples from the blog post's demo here:
我在这里复制了博客文章演示中的 CSS 和 jQuery 示例：
CSS
CSS
Assuming you have a div with a class of .classname, the css below should work.
假设你有一个 .classname 类的 div，下面的 css 应该可以工作。
The left:50%; top:50%;sets the top left corner of the div to the center of the screen; the margin:-75px 0 0 -135px;moves it to the left and up by half of the width and height of the fixed-size div respectively.
将left:50%; top:50%;div 的左上角设置为屏幕中央；在margin:-75px 0 0 -135px;它移动到左边和向上分别由固定大小的div的宽度和高度的一半。
.className{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
jQuery
jQuery
$(document).ready(function(){
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
});
Here's a demo of the techniques in practice.
这是实践中的技术演示。
回答by JWC
This site gives some options on vertically centering your div: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
该站点提供了一些垂直居中 div 的选项：http: //www.jakpsatweb.cz/css/css-vertical-center-solution.html
回答by nokiko
There is a better solution now: Vertical align anything with just 3 lines of CSS
现在有一个更好的解决方案：使用 3 行 CSS 垂直对齐任何内容
回答by RussellUresti
This isn't as easy to do as one might expect -- you can really only do vertical alignment if you know the height of your container. IF this is the case, you can do it with absolute positioning.
这并不像人们想象的那么容易 - 如果您知道容器的高度，您实际上只能进行垂直对齐。如果是这种情况，您可以使用绝对定位来完成。
The concept is to set the top / left positions at 50%, and then use negative margins (set to half the height / width) to pull the container back to being centered.
概念是将顶部/左侧位置设置为 50%，然后使用负边距（设置为高度/宽度的一半）将容器拉回居中。
Example: http://jsbin.com/ipawe/edit
示例：http: //jsbin.com/ipawe/edit
Basic CSS:
基本CSS：
#mydiv {
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 700px;
margin-top: -200px; /* -(1/2 height) */
margin-left: -350px; /* -(1/2 width) */
}
