小开

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

小开

这个解决方案对我很有效

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

(或高度:70% /底部:15%

高度:40% /底部:30%…)

小开

最好和最灵活的方式

这个演示中的主要技巧是，在元素从上到下的正常流中，因此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>

小开

我认为有两种方法使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

小开

尽管这在OP问这个问题时不起作用，但我认为，至少对于现代浏览器来说，最好的解决方案是使用显示:flex或伪类。

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

对于伪类，一个例子可以是:

.centerPseudo {
display:inline-block;
text-align:center;
}


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

根据css技巧和中数， 显示:flex的用法如下:

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

flex还有其他可用的属性，在上面提到的链接中解释了这些属性，并提供了进一步的示例。

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

小开

如果你正在使用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/

小开

抱歉回复晚了最好的方法是

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

上边距和左边距应该根据你的div框大小

小开

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

调整左侧和顶部的宽度和高度，即(100% - 80%)/ 2 = 10%

小开

我知道我迟到了，但是这里有一种方法可以将一个维度未知的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>

演示:

看看这个演示。

小开

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

所有主流浏览器和ie9及以上版本都支持(别担心ie8，因为它在今年秋天和winxp一起死了。感谢上帝)。

JS Fiddle Demo .

小开

另一个方法(bulletproof)来自在这里，使用'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;
}

小开

另一个答案是这。

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

小开

利用Flex显示的简单解决方案

 <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占据了整个屏幕，并有一个针对每种浏览器的显示:flex集。第二个div(居中div)充分利用了显示:flex div，其中margin:auto工作出色。

IE11+兼容性。(IE10 w/ prefix)。

小开

这个技巧的简单性是惊人的:
(尽管这个方法有它的含义，但是如果您只需要将元素居中，而不考虑其余内容的流，那么它是可以的。小心使用)

标记:

<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，不是吗?

小开

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

结果如下所示:

enter image description here

小开

如果你正在研究新的浏览器(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工作。

工作原理:

当您指定left和top为50%时，div将位于页面的右下四分之一，其左上端固定在页面的中心。这是因为，左/顶部属性(当以%给出时)是基于外部div(在您的情况下，窗口)的高度计算的。< / p >

但是transform使用元素的高度/宽度来决定转换，因此div将向左移动(50%宽度)和向上移动(50%高度)，因为它们是以负号给出的，因此将其对齐到页面的中心。

如果你必须支持旧的浏览器(抱歉，包括IE9)，那么表格单元格是最流行的方法。

小开

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

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

小开

我喜欢的方法是将一个盒子垂直和水平居中，是以下技术:

外容器

应该有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: translate3d(-50%,-50%, 0);实现或多或少相同的灵活性，我建议的技术有更好的浏览器支持。即使使用像-webkit， -ms或-moz这样的浏览器前缀，transform也不能提供完全相同的浏览器支持。

所以如果你关心旧的浏览器(例如。IE9及以下版本)，您不应该使用transform进行定位。

小开

我将使用translate:

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

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

在某些情况下，translate比translate3d好，因为它被更多的浏览器支持。# EYZ2

综上所述，所有版本的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>

小开

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

小开

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

解释:

给它一个绝对定位(父元素应该有相对定位)。然后，左上角被移动到中心。因为你还不知道宽度/高度，所以你使用css transform来转换相对于中间的位置。平移(-50%，-50%)会将左上角的x和y位置降低50%的宽度和高度。

小开

这是最好的代码，以中心的div机器人水平和垂直

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

小开

解决方案

仅使用两行CSS，利用Flexbox的神奇力量

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

小开

在父元素上使用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>

小开

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

有位置的元素:绝对的;相对于最近的定位祖先(而不是定位相对到viewport (body标签)，像fixed一样)。

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

来源:# EYZ0

小开

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

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

小开

2018年使用CSS网格的方式:

.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>

小开

我很惊讶这个还没有被提到，但最简单的方法是通过设置高度，边距(和宽度，如果你想)使用视口大小。< br > 如你所知，viewport的总高度= 100vh.
假设你想让容器的height占据屏幕的60% (60vh)，你可以将剩下的40vh平均分配在顶部和底部边缘，这样元素就会自动在中心对齐将margin-left和margin-right设置为auto，将确保容器水平居中。< br > < / p >

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

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

小开

虽然我太晚了，但这很简单。页面中心总是向左50%，顶部50%。减去div width和height的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>

小开

使用Flex-box在我看来:

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

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

您可以看到，只有三个CSS属性可以用于将子元素垂直和水平居中。通过激活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，中数或css技巧了解更多信息。

把一个<div>在一个页面上垂直和水平?

最好和最灵活的方式

外容器

内容器

内容框

演示

编辑

2018年使用CSS网格的方式: