垂直和水平居中在页面上<div>的最佳方法是什么？

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

我知道这个margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; 将以水平为中心，但垂直方向最好的方法是什么？

Answer 1

最好，最灵活的方式

我在dabblet.com上的演示

这个演示的主要技巧是在正常的元素stream从上到下，所以margin-top: auto被设置为零。 但是，绝对定位的元素对于自由空间的分配行为是相同的，同样可以垂直居中指定的top和bottom （在IE7中不起作用）。

这个技巧将适用于任何大小的div 。

HTML：

 <div></div> 

CSS：

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

Answer 2

尽pipe在OP提出这个问题的时候这样做不起作用，但我认为，至less对于现代浏览器来说，最好的解决scheme是使用display：flex或者pseudo类 。

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

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

 .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或其他答案中显示的固定宽度/高度解决scheme。

Answer 3

这种技术的简单性令人惊叹：
（虽然这个方法有其含义，但是如果你只需要中心元素而不pipe其他内容的stream量，那就好了，小心使用）

标记：

 <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 { background:red; position:absolute; color:#fff; top:50%; left:50%; padding:15px; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } 

这也将水平和垂直居中元素。 没有负边距，只是变换的力量。 另外，我们应该已经忘记了IE8不应该吗？

Answer 4

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

在某些情况下， 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%); background-color: cyan; 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 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> 

Answer 5

我认为有两种方法可以通过CSSalignmentdiv中心。

 .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-horizo​​ntally-and.html

Answer 6

这是我写的一段脚本（ 使用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(); }; 

Answer 7

如果你正在看新的浏览器（IE10 +），

那么你可以使用transform属性来alignment中心的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将位于页面右下angular的四分之一处，其左上端固定在页面中心。 这是因为，左/顶部属性（当以％给出时）是根据外部div的高度（在你的情况下，窗口）计算的。

但是，变换使用元素的高度/宽度来确定平移，所以div会向左（50％宽度）和顶部（高度的50％）移动，因为它们是以负值给出的，因此会将其与页面中心alignment。

如果你不得不支持旧的浏览器（也包括IE9），那么表格单元格是最常用的方法。

Answer 8

利用Flex Display的简单解决scheme

CSS

  .flexme{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 

HTML

  <div class = 'flexme' style = '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占据整个屏幕，并为每个浏览器设置一个显示器：flex。 第二个div（居中的div）利用了显示器的优势：flex div margin：auto可以很好地工作。

注意 IE11 +的兼容性。 （IE10 w /前缀）。

另外：这里是一些FlexBox的跨浏览器兼容类，我在我的项目中使用，所以事情不会中断。 也许它会为你节省一些头痛。

CSS

 .flexme{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .flexrow { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-flex-flow: row wrap; flex-flow: row wrap; } .flexcol { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-flex-flow: column wrap; flex-flow: column wrap; } .flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } 

为了方便起见，我还有flexcolnowrap和flexrownowrap类（其中wrap包被replace为nowrap）以及flex2，flex3和最多6个类。

Answer 9

我最喜欢的方式是垂直和水平放置一个盒子，方法如下：

外面的容器

• 应该有display: table;

内部的容器

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

内容框

• 应该有display: inline-block;
• 应该重新调整水平文本alignment到例如。 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> 

Answer 10

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

说明：

给它一个绝对的定位（父母应该有相对定位）。 然后，左上angular移到中央。 因为还不知道宽度/高度，所以使用css转换将位置相对于中间位置进行转换。 平移（-50％，-50％）会将左上angular的x和y位置减less50％的宽度和高度。

Answer 11

我知道我迟到了派对，但是这里有一个方法可以在一个未知维度的父母中间将一个未知维度的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> 

DEMO：

看看这个演示 。

Answer 12

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

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

Answer 13

这个解决scheme为我工作

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

（或身高：70％/下：15％

身高：40％/底部：30％…）

Answer 14

实际上有一个解决scheme，使用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%); } 

支持所有主stream浏览器和IE 9以上（不要担心IE 8，因为它今年秋天与win xp一起死亡，感谢上帝）

JS小提琴演示

Answer 15

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

左右调整宽度和高度，即（100％ – 80％）/ 2 = 10％

Answer 16

从这里采用'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; } 

Answer 17

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

结果看起来如此：

Answer 18

另一个答案就是这个 。

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

Answer 19

解

只使用两行CSS，利用Flexbox的魔力

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

Answer 20

使用display:grid父母上的display:grid和设置margin:auto到中心elemnt将做的伎俩：

看下面的代码片段：

 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> 

Answer 21

如果你们使用jQuery UI，你可以使用.position（）;

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

CSS

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

jQuery的

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

我希望这有帮助。

jsfiddle： http : //jsfiddle.net/vx9gV/

Answer 22

 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> 

Answer 23

浏览器支持它，使用翻译function强大。

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

Answer 24

如果你知道为你的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> 

Answer 25

请使用以下CSS属性来水平以及垂直居中alignment元素。 这对我来说工作得很好。

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

Answer 26

对不起，迟到回复最好的办法是

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

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