这个问题已经在这里有了答案：

如何水平和垂直居中放置元素（19个答案）

11个月前关闭。

在页面上垂直和水平居中放置<div>元素的最佳方法？

我知道margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; 会以水平为中心，但是垂直进行的最佳方法是什么？

#1楼

这个解决方案对我有用

    .middleDiv{position : absolute;height : 90%;bottom: 5%;}

（或高度：70％/底部：15％

高度：40％/底部：30％...）

#2楼

最好，最灵活的方式

我在dabblet.com上的演示

该演示的主要技巧是元素的正常流动是从上到下，因此margin-top: auto设置为零。但是，绝对放置的元素在分配自由空间方面的作用相同，并且类似地可以在指定的top和bottom垂直居中（在IE7中不起作用）。

此技巧适用于任何大小的`div` 。

 div { width: 100px; height: 100px; background-color: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }

 <div></div>

#3楼

我认为有两种方法可以使div中心通过CSS对齐。

.middleDiv {position : absolute;    width    : 200px;height   : 200px;left     : 50%;top      : 50%;margin-left : -100px; /* half of the width  */margin-top  : -100px; /* half of the height */
}

这是最简单，最好的方法。对于演示，请访问以下链接：

http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html

#4楼

即使在OP提出这个问题时这没有用，但我认为，至少对于现代浏览器来说，最好的解决方案是使用display：flex或pseudo classes 。

您可以在下面的小提琴中看到一个示例。这是更新的小提琴。

对于伪类，一个示例可能是：

.centerPseudo {display:inline-block;text-align:center;
}.centerPseudo::before{content:'';display:inline-block;height:100%;vertical-align:middle;width:0px;
}

display的用法：flex ，根据css-tricks和MDN如下：

.centerFlex {align-items: center;display: flex;justify-content: center;
}

还有其他可用于flex的属性，在上面提到的链接中有进一步的示例进行了说明。

如果必须支持不支持css3的较旧的浏览器，则可能应使用javascript或其他答案中所示的固定宽度/高度解决方案。

#5楼

如果您使用的是JQuery，则可以使用.position() 。

<div class="positionthis"></div>

的CSS

.positionthis {width:100px;height:100px;position: absolute;background:blue;
}

Javascript（JQuery）

$(document).ready(function () {$('.positionthis').position({of: $(document),my: 'center center',at: 'center center',collision: 'flip flip'});
});

JSFiddle： http ： //jsfiddle.net/vx9gV/

#6楼

对不起，迟到的最佳回复是

  div {position: fixed;top: 50%;left: 50%;margin-top: -50px;margin-left: -100px;}

margin-top和margin-left应该根据您的div框大小

#7楼

div {border-style: solid;position: fixed;width: 80%;height: 80%;left: 10%;top: 10%;
}

调整宽度和高度的左上角，即（100％-80％）/ 2 = 10％

#8楼

我知道我参加聚会的时间很晚，但这是将未知尺寸的div居中放置在未知尺寸的父级中的一种方法。

样式：

<style>.table {display: table;height: 100%;margin: 0 auto;}.table-cell {display: table-cell;vertical-align: middle;      }.centered {background-color: red;}</style>

HTML：

<div class="table"><div class="table-cell"><div class="centered">centered</div></div>
</div>

演示：

看看这个演示。

#9楼

实际上，有一个使用css3的解决方案，它可以使一个高度未知的div垂直居中。诀窍是将div向下移动50％，然后使用transformY将其恢复到中间位置。唯一的前提是要居中的元素必须具有父元素。例：

<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%);
}

受所有主要浏览器以及IE 9及更高版本的支持（不要担心IE 8，因为它在今年秋天与win xp一起死亡。感谢上帝。）

JS小提琴演示

#10楼

从这里采取的另一种方法（防弹）利用“ display：table”规则：

标记

<div class="container"><div class="outer"><div class="inner"><div class="centered">...</div></div></div>
</div>

CSS：

.outer {display: table;width: 100%;height: 100%;
}
.inner {display: table-cell;vertical-align: middle;text-align: center;
}
.centered {position: relative;display: inline-block;width: 50%;padding: 1em;background: orange;color: white;
}

#11楼

一个替代的答案是这个。

<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;
}

#12楼

利用Flex Display的简单解决方案

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '><div id = 'div_you_want_centered' style = 'margin:auto;'> This will be Centered </div></div>

查看http://css-tricks.com/snippets/css/a-guide-to-flexbox/

第一个div占据了整个屏幕，并为每个浏览器设置了display：flex。第二个div（居中的div）利用display：flex div的优势，其中margin：auto表现出色。

注意 IE11 +兼容性。（带有前缀的IE10）。

#13楼

这种技术的简单性令人惊叹：
（尽管这种方法有其含义，但是如果您只需要将元素居中而不考虑其余内容的流动，那就很好。请谨慎使用）

标记：

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>

和CSS：

div {color: white;background: red;padding: 15px;position: absolute;top: 50%;left: 50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
}

这也会使元素在水平和垂直方向上居中。没有负边距，只有变换的力量。此外，我们应该已经忘记IE8，不是吗？

#14楼

我在查看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>

结果看起来像这样：

#15楼

如果您正在使用新的浏览器（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工作。

这个怎么运作：

当您指定左上方为50％时，div将位于页面的右下四分之一，其左上端固定在页面的中心。这是因为，左/上属性（当以％给出时）是根据外部div的高度（在您的情况下为window）计算的。

但是transform使用元素的高度/宽度来确定平移，因此div将向左（宽度的50％）和顶部（高度的50％）移动，因为它们是负数，因此将其与页面的中心对齐。

如果您必须支持较旧的浏览器（并且很抱歉还包括IE9），则表单元格是最常用的方法。

#16楼

是浏览器支持它，使用翻译功能强大。

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);

#17楼

我更喜欢将框垂直和水平居中的方式是以下技术：

外容器

应该有display: table;

内部容器

应该display: table-cell;
应该具有vertical-align: middle;
应该具有text-align: center;

内容框

应该display: inline-block;
应该将水平文本对齐方式重新调整为例如。 text-align: left; 或text-align: right; ，除非您希望文本居中

这种技术的优雅之处在于， 您可以将内容添加到内容框中，而不必担心其高度或宽度！

演示版

 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>

另请参阅此小提琴 ！

编辑

是的，我知道您可以使用transform: translate(-50%, -50%);或多或少地获得相同的灵活性transform: translate(-50%, -50%); 或transform: translate3d(-50%,-50%, 0); ，我提出的技术具有更好的浏览器支持。即使使用-webkit ， -ms或-moz类的浏览器前缀， transform也不提供完全相同的浏览器支持。

因此，如果您关心较旧的浏览器（例如IE9及以下版本），则不应使用transform进行定位。

#18楼

这是我不久前写的一个脚本（ 它是使用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();
};

#19楼

我会用translate ：

首先将div的左上角放在页面中心（使用position: fixed; top: 50%; left: 50% ）。然后， translate将其向上移动div高度的50％，以使其在页面上垂直居中。最后，平移还会将div向右移动其宽度的50％，以使其水平居中。

实际上，我认为此方法比其他方法要好，因为它不需要对父元素进行任何更改。

在某些情况下， translate比translate3d更好，因为它得到了更多浏览器的支持。 http://caniuse.com/#search=translate

概括地说，Chrome，Firefox 3.5 +，Opera 11.5 +，Safari，IE 9+和Edge的所有版本均支持此方法。

 .centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 20px; background-color: cyan; border: darkgreen 5px solid; padding: 5px; z-index: 100; } table { position: absolute; top: 0; left: 0; } td { position: relative; top: 0; left: 0; }

 <table> <tr> <td> <div class="centered">This div<br />is centered</div> <p> Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu. </p> </td> <td> <p> Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu. </p> </td> </tr> </table>

但是请注意，此方法使此div在滚动页面时停留在一个位置。这可能是您想要的，但是如果没有，那么还有另一种方法。

现在，如果我们尝试相同的CSS，但位置设置为绝对位置，它将位于具有绝对位置的最后一个父对象的中心。

 .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size: 20px; background-color: cyan; border: darkgreen 5px solid; padding: 5px; z-index: 100; } table { position: absolute; top: 0; left: 0; } td { position: relative; top: 0; left: 0; }

 <table> <tr> <td> <div class="centered">This div<br />is centered</div> <p> Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu. </p> </td> <td> <p> Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu. </p> </td> </tr> </table>

#20楼

如果您知道div的定义大小，则可以使用calc 。

实时示例： https ： //jsfiddle.net/o8416eq3/

注意：仅当您在CSS中硬编码``div''的宽度和高度时，这才有效。

 #target { position:fixed; top: calc(50vh - 100px/2); left: calc(50vw - 200px/2); width:200px; height:100px; background-color:red; }

 <div id='target'></div>

#21楼

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

说明：

给它一个绝对的位置（父母应该有相对的位置）。然后，将左上角移至中心。由于您尚不知道宽度/高度，因此可以使用css变换将位置相对于中间位置进行平移。平移（-50％，-50％）确实将左上角的x和y位置减少了宽度和高度的50％。

#22楼

这是使div机器人水平和垂直居中的最佳代码

 div { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

#23楼

解

仅使用两行CSS，利用Flexbox的强大功能

.parent { display: flex; }
.child { margin: auto }

#24楼

在父级上使用display:grid并将margin:auto设置为第一个元素将达到目的：

请参见以下代码段：

 html,body { width :100%; height:100%; margin:0; padding:0; } .container { display:grid; height:90%; background-color:blue; } .content { margin:auto; color:white; }

 <div class="container"> <div class="content"> cented div here</div> </div>

#25楼

 div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ }

 <body> <div>Div to be aligned vertically</div> </body>

位置：正文文档中的绝对 div

位置为：绝对的元素； to the viewport (body tag), like fixed). 相对于最近定位的祖先定位（而不是对于视口（body标签）定位，如固定）。

然而; 如果绝对定位的元素没有祖先，它将使用文档主体，并随页面滚动一起移动。

来源： CSS位置

#26楼

请使用以下CSS属性将元素水平和垂直居中对齐。这对我来说很好。

div {position: absolute;left: 0;top: 0;right: 0;bottom: 0px;margin: auto;width: 100px;height: 100px;
}

#27楼

2018年使用CSS Grid的方式：

.parent{display: grid;place-items: center center;
}

检查浏览器支持， Caniuse建议它可以在Chrome 57，FF 52，Opera 44，Safari 10.1，Edge 16中使用。我没有进行检查。

请参见下面的代码段：

 .parent{ display: grid; place-items: center center; /*place-items is a shorthand for align-items and justify-items*/ height: 200px; border: 1px solid black; background: gainsboro; } .child{ background: white; }

 <div class="parent"> <div class="child">Centered!</div> </div>

#28楼

令我惊讶的是，这还没有被提及，但是最简单的方法是使用视口大小设置高度，边距（如果需要，可以设置宽度）。
如您所知，视口的总高度= 100vh。
假设您希望容器的height占据屏幕的60％（60vh），则可以将其余（40vh）在顶部和底部边距之间平均分配，以使元素自动在中心对齐。
将margin-left和margin-right为auto ，将确保容器水平居中。

 .container { width: 60vw; /*optional*/ height: 60vh; margin: 20vh auto; background: #333; }

 <div class="container"> </div>

#29楼

虽然我来不及了，但这是非常容易和简单的。页面中心总是左50％，前50％。因此，将div的宽度和高度减去50％，然后设置左边界和右边界。希望它适用于任何地方-

 body{ background: #EEE; } .center-div{ position: absolute; width: 200px; height: 60px; left: 50%; margin-left: -100px; top: 50%; margin-top: -30px; background: #CCC; color: #000; text-align: center; }

 <div class="center-div"> <h3>This is center div</h3> </div>

#30楼

我认为使用Flex-box：

 #parent { display: flex; justify-content: center; align-items: center; }

 <div id="parent"> <div id="child">Hello World!</div> </div>

您会看到只有三个CSS属性可用于使子元素垂直和水平居中。 display: center; 通过激活Flex-box显示器来完成主体部分， justify-content: center; 将子元素垂直居中，然后align-items: center; 水平居中。为了获得最佳效果，我只添加了一些额外的样式：

 #parent { display: flex; justify-content: center; align-items: center; height: 500px; width: 500px; background: yellow; } #child { width: 100px; height: 100px; background: silver; }

 <div id="parent"> <div id="child">Hello World!</div> </div>

如果您想了解有关Flex-box的更多信息，可以访问W3Schools ， MDN或CSS-Tricks以获取更多信息。

居中的最佳方法 div 在垂直和水平页面上？ [重复]相关推荐

html这一段div居中显示,使一个div居中显示的三种方法
使一个我自址哈这工边识框处己按后大都加控不架的div居中显示比抖朋要插支一圈不者地器享说几的三种方法 1. div居中 /*第一种方法*/ div{ width: 200px; height: 200 ...
小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
如何在更大的div内使图像中心（垂直和水平）居中[重复]
这个问题已经在这里有了答案 : div块内的CSS中心文本(水平和垂直) (23个答案) Flexbox:水平和垂直居中 (10个答案) 如何在div内垂直对齐图像 (35个答案) 如何在div中垂直 ...
DIV居中的经典方法
参考:https://www.cnblogs.com/rubykakas/articles/7992662.html 1. 实现DIV水平居中设置DIV的宽高,使用margin设置边距0 auto, ...
用jQuery作为JS对象从选项中添加选项的最佳方法是什么？
使用jQuery从JavaScript对象向<select>添加选项的最佳方法是什么? 我正在寻找不需要插件的东西,但是我也对那里的插件感兴趣. 这是我所做的: selectValues ...
mac怎么合并两个容器_PDF怎样合并？在Mac上合并PDF文件的最佳方法
在保存编辑内容的同时合并PDF文件可能是一个大问题.合并大文件时,"预览"不涵盖展平,并且会使系统变慢.这些和其他问题可能会迫使您寻找更好的选择.让我们探索在Mac上组合PDF以涵 ...
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
网页html 图片横向摆放,css实现多张图片横向居中显示的方法
先讲一下实现的步骤: 最终效果 2. 代码实现 HTML部分分类小贴士 CSS部分 .main{ width:100%; margin-top:40px; } .main .tag{ margin: ...
不定宽高的DIV，垂直水平居中
1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

居中的最佳方法 div 在垂直和水平页面上？ [重复]

#1楼

#2楼