588

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

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

4

30 回答 30

790

最好最灵活的方式

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

于 2012-11-13T06:27:16.413 回答
153

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

于 2013-09-04T15:43:57.953 回答
107

这种技术的简单性令人惊叹：（
这种方法虽然有其含义，但如果您只需要居中元素而不管其余内容的流动，那很好。小心使用）

标记： 

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

于 2015-01-16T16:03:17.100 回答
83

我会使用translate：

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

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

translatetranslate3d由于它受到更多浏览器的支持，因此比某些情况下要好。https://caniuse.com/#feat=transforms2d

综上所述，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>

于 2016-04-19T11:42:58.610 回答
28

利用 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）。

于 2015-01-09T20:58:07.890 回答
25

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

.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

于 2013-07-06T11:37:08.837 回答
23

在我看来使用 Flex-box：

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="parent">
  <div id="child">Hello World!</div>
</div>

您会看到只有三个 CSS 属性可用于将子元素垂直和水平居中。display: flex;通过激活 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以获取更多信息。

于 2018-09-10T23:25:42.543 回答
22

如果您正在查看新的浏览器（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 的高度（在您的情况下为窗口）计算的。

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

如果您必须支持较旧的浏览器（很抱歉还包括 IE9），那么表格单元格是最流行的使用方法。

于 2015-07-26T17:38:31.500 回答
16 
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

解释：

给它一个绝对定位（父级应该有相对定位）。然后，左上角移动到中心。因为您还不知道宽度/高度，所以您使用 css 变换将位置相对于中间平移。translate(-50%, -50%) 确实将左上角的 x 和 y 位置减少了宽度和高度的 50%。

于 2016-07-25T15:45:36.180 回答
15

我最喜欢的将盒子垂直和水平居中的方法是以下技术：

外容器

  • 应该有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%);是的，我知道您可以使用or获得或多或少相同的灵活性，transform: translate3d(-50%,-50%, 0);我提出的技术具有更好的浏览器支持。即使使用像-webkit,-ms或-moz,这样的浏览器前缀transform也不提供完全相同的浏览器支持。

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

于 2016-02-25T23:22:01.397 回答
13

这是我不久前写的一个脚本（它是使用 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();
};
于 2008-12-10T17:16:16.960 回答
12

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

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

于 2017-07-28T11:43:45.570 回答
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>

演示：

看看这个演示。

于 2014-07-24T13:48:05.940 回答
8

虽然我来晚了，但这很容易和简单。页面中心始终位于 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>

于 2018-04-26T04:58:51.197 回答
7

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>

于 2018-01-28T10:15:23.813 回答
6 
div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

左右调整宽度和高度，即 (100% - 80%) / 2 = 10%

于 2014-07-22T11:45:32.853 回答
6

实际上有一个解决方案，使用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 小提琴演示

于 2014-09-22T16:06:54.373 回答
6

解决方案

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

.parent { display: flex; }
.child { margin: auto }
于 2017-08-14T23:28:35.477 回答
5

使用“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;
}
于 2014-10-09T15:44:29.513 回答
5

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

结果看起来是这样的：

在此处输入图像描述

于 2015-03-24T20:19:50.473 回答
4

另一个答案是this。

<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;
}
于 2014-12-11T14:16:49.093 回答
4

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

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }
<div class="container">
</div>

于 2018-02-24T08:43:55.120 回答
3

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

于 2013-09-18T10:09:22.380 回答
3 

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

具有位置的元素：绝对；相对于最近的定位祖先定位（而不是相对于视口（主体标签）定位，如固定）。

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

来源：CSS位置

于 2017-09-23T02:17:30.300 回答
3

如果您知道为您定义的尺寸，您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>

于 2016-06-16T11:59:42.373 回答
3

display:grid在父级上使用并设置margin:auto 为 centerrd 元素可以解决问题：

见下面的片段：

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>

于 2017-08-17T08:39:48.153 回答
2

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

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);
于 2015-08-04T13:42:14.503 回答
0

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

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

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

于 2013-10-16T14:58:45.710 回答
0

这个解决方案对我有用

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

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

高度：40% / 底部：30% ...)

于 2012-08-24T14:03:22.603 回答
0

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

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}
于 2017-10-06T08:44:32.710 回答