在页面上垂直和水平居中放置

的最佳方法？\[重复\]</p>

HTML CSS

番长Davaid

2020-03-18

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

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

</div>

第1983篇《在页面上垂直和水平居中放置

的最佳方法？\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>

共26个回答

神无宝儿 2020.03.18

对不起，迟到的最佳回复是

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

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

前端逆天 2020.03.18

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

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

凯A 2020.03.18

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

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

西门逆天 2020.03.18

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

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

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

来源：CSS位置

伽罗 2020.03.18

这个解决方案对我有用

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

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

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

乐小哥L 2020.03.18

display:grid在parent上使用并设置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>

前端Itachi凯 2020.03.18

令我惊讶的是，这还没有被提及，但是最简单的方法是使用视口大小设置高度，边距（如果需要，可以设置宽度）。
如您所知，视口的总高度= 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>

古一Jim 2020.03.18

解

仅使用两行CSS，利用Flexbox的强大功能

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

古一柳叶风吹 2020.03.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;
}

阳光十三GO 2020.03.18

虽然我来不及了，但这是非常容易和简单的。页面中心总是左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>

伽罗达蒙 2020.03.18

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>

SamTony 2020.03.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;
}

Eva西里蛋蛋 2020.03.18

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

阿飞猪猪十三 2020.03.18

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

调整宽度和高度的左右方向，即（100％-80％）/ 2 = 10％

逆天神无 2020.03.18

我知道我参加聚会的时间很晚，但这是将未知尺寸的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>

演示：

看看这个演示。

JinJin樱 2020.03.18

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

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

Harry神乐梅 2020.03.18

我认为使用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以获取更多信息。

前端Mandy 2020.03.18

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

仲羽蛋蛋 2020.03.18

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

阳光梅L 2020.03.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的位置指定为相对位置，然后此CSS就可以为您的div工作。

怎么运行的：

当您指定左上方为50％时，div将位于页面的右下四分之一，其左上端固定在页面的中心。这是因为，左/顶部属性（当以％给出时）是根据外部div的高度（在您的情况下为window）计算的。

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

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

西门村村古一 2020.03.18

我更喜欢将框垂直和水平居中的方式是以下技术：

外容器

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

SamTony 2020.03.18

这种技术的简单性令人震惊：（
尽管这种方法有其含义，但是如果您只需要将元素居中而不考虑其余内容的流向，那就很好了。请谨慎使用）

标记：

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

猪猪Pro 2020.03.18

我会用translate：

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

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

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

村村Near 2020.03.18

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

番长LA 2020.03.18

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

飞云卡卡西 2020.03.18

最好，最灵活的方式

我在dabblet.com上的演示

The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, an absolutely positioned element acts the same for distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).

This trick will work with any sizes of `div`.

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

<div></div>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

2018年使用CSS Grid的方式：

外容器

内部容器

内容框

演示版

编辑

最好，最灵活的方式

This trick will work with any sizes of div.

This trick will work with any sizes of `div`.