将 a 居中的最佳方式<div>在垂直和水平页面上？ [复制]

Question

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

如何水平和垂直居中元素（25 个回答）

2年前关闭。

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

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

Answer 1

最好最灵活的方式

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

Answer 2

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

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

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

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

Answer 3

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

标记：

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

Answer 4

我会使用translate ：

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

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

translate在某些情况下比translate3d更好，因为它被更多的浏览器支持。 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>

Answer 5

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

Answer 6

我认为有两种方法可以通过 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

Answer 7

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

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

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

Answer 8

在我看来使用 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 display 来完成主要部分， 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以获取更多信息。

Answer 9

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%。

Answer 10

我更喜欢在垂直和水平方向上居中框的方法是以下技术：

外容器

• 应该有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进行定位。

Answer 11

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

这是水平和垂直居中 div bot 的最佳代码

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

Answer 13

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

演示：

看看这个演示。

Answer 14

虽然我来晚了，但这很容易和简单。 页面中心总是左边 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>

Answer 15

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

相对于宽度和高度调整 left 和 top，即 (100% - 80%) / 2 = 10%

Answer 16

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

Answer 17

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>

Answer 18

使用“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 19

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

解决方案

只用两行 CSS，发挥 Flexbox 的神奇力量

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

Answer 21

另一个答案是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;
}

Answer 22

我很惊讶还没有提到这一点，但最简单的方法是使用视口大小设置高度、边距（和宽度，如果需要）。
您可能知道，视口的总高度 = 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>

Answer 23

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

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

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

Answer 26

 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 位置

Answer 27

浏览器是否支持，使用translate功能强大。

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 28

这个解决方案对我有用

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

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

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

Answer 29

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

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

Answer 30

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

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

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