【翻译】CSS水平和垂直居中的12种方法
在CSS中有许多不同的方法能够做到水平和垂直居中，但很难去选择合适的那个。我会向你展示我所看到的所有的方法，帮助你在所面对的情境下选择最棒的那一个。
方法1
此方法将只能垂直居中单行文本。只需将行高设置为对象的高度，文本就会居中。
<div class="container">content</div>
CSS:
.container {
height: 100px;
line-height: 100px;/*与div等高*/
}
优点：
1.兼容所有浏览器
2.当没有足够的空间时，文字不会被切断
缺点：
1.只对文本有效（不能块级元素）
2.当为多行文字而不只一行时（如文字换行），这种方法破坏十分严重
此方法对小的元素非常有用，比如将按钮或单行文本字段中的文本垂直居中。
方法2
此方法使用绝对定位的div，它的top为50%，上边距设置为内容高度一半的负值。这意味着对象必须有一个固定的高度，这是被CSS定义了的。因为它有一个固定的高度，你可能需要给容器div设置overflow：hidden，因此如果内部有太多的内容时，滚动条就会出现，而不是内容在在div外继续排列！
<div class="container">content</div>
CSS:
.container {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;/* 负的高度的一半 */
}
优点：
1.兼容所有浏览器
2.不需要嵌套的标签
缺点：
1.当没有足够的空间时，内容会消失（比如当div在body内部并且用户缩小浏览器窗口，滚动条不会出现）
我们可以修改上面的CSS代码使div垂直和水平居中。
CSS:
#wrap {
width: 200px;
height:200px;
position: absolute;
left: 50%;
margin-left: -100px;/* 宽度/2 */
top:50%;
margin-top: -100px;
}
方法3
此方法设置一些div的display和table类似，所以我们可以使用table的veitical-align属性（这个属性对其他元素的效果很不一样）。
<div id="container">
<div id="content">content</div>
</div>
CSS:
#container {
height: 300px;
display: table;
}
#content {
display:table-cell;
vertical-align: middle;
}
优点：
1.内容可以动态改变高度（这样不用一定得在CSS中定义）
2.当容器没有足够的空间时，内容不会被切断。
缺点：
1.IE低版本不支持
2.需要很多嵌套的标签（真的不好，这是一个很主观的话题）
由于这种方法不支持ie6-7，所以如果你想解决这个问题，只需添加一个新的div来使用hack方式。
<div class="table">
<div class="tableCell">
<div class="content">content</div>
</div>
</div>
CSS:
.table {
height: 300px;/
width: 300px;
display: table;
position: relative;
float:left;
}
.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.content {
*position:relative;
*top: -50%;
*left: -50%;
}
方法4
在这种方法中，我们将在内容元素前加一个div。这个div将设置为height:50%;并且margin-bottom为内容高度的一半。然后内容清除浮动，内容将会居中。
你应该注意到，如果内容元素在body内，我们需要设置height:100%。
<body>
<div id="floater"><!--This block have empty content --></div>
<div id="content">Content section</div>
</body>
CSS:
html,body {height: 100%;}
#floater{
float:left;
height:50%;
margin-bottom: -120px;/*240px/2*/
}
#content {
clear:both;
height: 240px;
position: relative;
}
优点：
1.兼容所有浏览器
2.当没有足够的空间（即窗口缩小）时我们的内容不会被切断，滚动条会出现。
缺点：
1.需要一个额外的空元素
方法5
该方法设置一些div来像table一样显示，所以我们可以像方法3一样使用table的vertical-align属性，但是对于IE，我们需要添加一个inline水平的标签，块级水平的标签是没有任何用的。
<p class="table">
<span class="tableCell">Centering multiple lines <br>in a block
container.</span>
<!--[if lte IE 7]><b></b><![endif]-->
</p>
CSS:
<style type="text/css">
.table {
border: 1px solid orange;
display: table;
height: 200px;
width: 200px;
text-align: center;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
</style>
<!--[if lte ie 7]>
<style type="text/css">
.tableCell {
display: inline-block;
}
b {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 1px;
}
</style>
<![endif]-->
优点：
内容可以动态改变高度
缺点：
很多嵌套标签
方法6
此方法设置display:inline-block，添加父元素的高度为固定数值或百分比。
<div id="parent">
<div id="vertically_center">
<p>I am vertically centered!</p>
</div>
<div id="extra"><!-- ie comment --></div>
</div>
CSS:
<style type="text/css">
html,
body{
height: 100%;
}
#parent {
height: 500px;
border: 1px solid red;
}
#vertically_center,
#extra {
display: inline-block;
vertical-align: middle;
}
#extra {
height: 100%;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
/*IE6-7not support display:inline-block,so we need a hack*/
#vertically_center,
#extra {
display: inline;
zoom: 1;
}
#extra {
width: 1px;
}
</style>
<![endif]-->
优点：
兼容所有浏览器
缺点：
需要添加父级的高度，并为IE写一个hack，另外，需要很多标签。
方法7
该方法用于多行文本和高度是可变的时候，我们需要设置给顶部和底部同样的padding。
<div class="columns">
<div class="item">test</div>
</div>
CSS:
.item {padding-top:30px;padding-bottom:30px;}
优点：
简单且兼容所有浏览器
缺点：
如果高度是固定的，此方法无效的。
方法8
现在让我们来看看如何使用jQuery来居中。
<div class="container">
<p>Centered in the middle of the page with jQuery</p>
</div>
CSS:
.container{
background-color:#338BC7;
width:270px;
height:150px;
}
jQuery:
$(document).ready(function(){
$(window).resize(function(){
$('.container').css({
position:'absolute',
left: ($(window).width() -$('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2
});
})
$(window).resize();
});
优点：
简单且兼容所有浏览器
缺点：
需要jQuery，如果JavaScript被禁用将会失效
方法9
在这种方法中，我们使用CSS3的新属性：flexbox。
<body>
<img src="//vertical.jpg" alt="flexbox way" />
</body>
CSS:
*{
margin: 0;
padding:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;/*for firefox*/
}
优点：
简单且在响应式设计中效果十分棒
缺点：
在有些浏览器中不起作用，因为其不支持flexbox
方法10
如果网站有弹窗，我们不知道它的大小，但我们总是希望它能在大多数的设备里居中。
<div class="container">
<div class="cotent-header">Popup title</div>
<div class="content-body">pop up in the window</div>
</div>
CSS:
*{
margin: 0;
padding:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
border: 1px solid #bbb;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0,0,0,.5);
position:absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.content-header {
padding: 10px 20px;
background: rgba(0,0,0,.25);
color:#fff;
}
.content-body{
padding: 20px;
background: #fff;
}
优点：
总是以不同的设备屏幕为中心
缺点：
实现有一点难，在一些浏览器中无效
方法11
在这种方法中，我们使用伪元素（:before和:after）来垂直居中网站中的对象。
<body>
<div>Make it centered in the window</div>
</body>
CSS:
*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
}
div {
display:inline-block;
vertical-align: middle;
width: 99.5%;
}
body:after {
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
优点：
在现代浏览器中工作得很好
缺点：
复杂和更多的CSS代码。
方法12
这个方法，我认为是使对象在网站中垂直居中最简单的方法。
<body>
<div>Make it centered in the window</div>
</body>
CSS:
#center {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
}
优点：
容易，在现代浏览器中工作得很好
缺点：
也需要height: 100%;(其实是指用absolute定位需要，用fixed定位不需要)
兼容性注意事项
正如你所知，IE是唯一给你带来问题的主要浏览器，你需要测试IE的旧版本去解决兼容性问题。
结论
除了上面我收集的，还有其他的一些方法可以做到垂直和水平居中的网站，如果你有其他的方法，请在评论区分享。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？