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

时间：2008-12-10 17:11:33

标签： html css alignment vertical-alignment centering

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

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

30 个答案:

答案 0 :(得分：670)

最好，最灵活的方式

我的demo on 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>

答案 1 :(得分：122)

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

您可以在以下fiddle中查看示例。 这是updated fiddle。

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

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

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

根据css-tricks和MDN， display：flex 的使用情况如下：

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

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

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

答案 2 :(得分：80)

这种技术的简单性令人惊叹：
（这种方法虽然有其含义，但如果您只需要将元素置于中心，无论其他内容的流量如何，它都可以。请小心使用）

标记：

<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不应该吗？

答案 3 :(得分：67)

我会使用translate：

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

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

由于受到更多浏览器的支持，

translate在某些情况下优于translate3d。 http://caniuse.com/#search=translate

总而言之，所有版本的Chrome，Firefox 3.5 +，Opera 11.5 +，所有版本的Safari，IE 9+和Edge都支持此方法。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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


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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：22)

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

答案 5 :(得分：21)

利用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占据整个屏幕并有一个显示：为每个浏览器设置flex。第二个div（居中的div）利用了display：flex div，其中margin：auto工作得很好。

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

答案 6 :(得分：18)

如果您正在查看新浏览器（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的位置指定为 relative ，然后这个CSS开始为你的div工作。

工作原理：

当您指定50％的左侧和顶部时，div位于页面右下角的四分之一处，其左上端固定在页面的中心。 这是因为，左/顶部属性（以％表示）是根据外部div的高度（在您的情况下，窗口）计算的。

但变换使用元素的高度/宽度来确定平移，因此div将向左移动（50％宽度）和向上移动（高度为50％），因为它们以负数给出，因此将其与中心对齐页。

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

答案 7 :(得分：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>

另见this Fiddle！

修改

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

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

答案 8 :(得分：14)

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

答案 9 :(得分：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();
};

答案 10 :(得分：10)

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

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

答案 11 :(得分：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>

样本：

查看此demo。

答案 12 :(得分：7)

我认为使用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了解更多信息。

答案 13 :(得分：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 Fiddle Demo

答案 14 :(得分：6)

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

相对于宽度和高度调整左侧和顶部，即（100％ - 80％）/ 2 = 10％

答案 15 :(得分：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>

结果看起来如此：

enter image description here

答案 16 :(得分：5)

另一种方法（防弹）取自here利用'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;
}

答案 17 :(得分：5)

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>

答案 18 :(得分：5)

<强>解决方案

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

var bot = new Discord.Client({
   token: auth.token,
   autorun: true
});
bot.on('ready', function (evt) {
    logger.info('Connected');
    logger.info('Logged in as: ');
    logger.info(bot.username + ' - (' + bot.id + ')');
});
bot.on('message', function (user, userID, channelID, message, evt) {
    // My code
}

答案 19 :(得分：4)

此解决方案适合我

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

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

身高：40％/底：30％......）

答案 20 :(得分：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;
}

答案 21 :(得分：4)

虽然我来不及，但这很简单。页面中心总是留50％，前50％。因此减去div宽度和高度50％并设置左边距和右边距。希望它适用于所有地方 - 

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

答案 22 :(得分：4)

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

答案 23 :(得分：3)

在父级上使用display:grid并将margin:auto设置为centrerd 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>

答案 24 :(得分：3)

＆＃13;
＆＃13; 
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 */	    
}
＆＃13; 
<body>
    <div>Div to be aligned vertically</div>
</body>
＆＃13;
＆＃13;
＆＃13;

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

位置为绝对的元素;相对于最近定位的祖先（而不是相对定位到视口（body标签），如固定）。

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

来源：CSS position

答案 25 :(得分：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/

答案 26 :(得分：3)

如果您知道div的已定义尺寸，则可以使用calc。

实例：https://jsfiddle.net/o8416eq3/

注意：只有在CSS中对``div`的宽度和高度进行了硬编码时才有效。

＆＃13;
＆＃13; 
#target {
  position:fixed;
  top: calc(50vh - 100px/2);
  left: calc(50vw - 200px/2);
  width:200px;
  height:100px;
  background-color:red;
}
＆＃13; 
<div id='target'></div>
＆＃13;
＆＃13;
＆＃13;

答案 27 :(得分：2)

浏览器是否支持它，使用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);

答案 28 :(得分：1)

请在水平和垂直方向使用以下CSS属性作为中心对齐元素。这对我来说很好。

DataFormatter

答案 29 :(得分：0)

很抱歉迟到的回复 最好的方法是

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

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

相关问题
最新问题