将<div>元素放置在屏幕中央

134

我想将一个<div>（或<table>）元素放置在屏幕的中心，而不管屏幕的大小。换句话说，“顶部”和“底部”上的间距应相等，而“右侧”和“左侧”上的间距应相等。我想仅使用CSS来完成此操作。

我已经尝试了以下方法，但是它不起作用：

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

注：
这是罚款的方式或者如果<div>元素（或<table>）滚动与网站或没有。只希望页面加载时居中。

javascript  css  html 
— 召集
source
1
— Purag 2012年
嗨，Purmou，您提到的问题是是否位于页面中间，即左侧和右侧等距-顶部和底部不等于！
— 2012年
1
— 划分
— bjb568 2014年

Answers:

201

如果您具有固定的宽度和高度，则简单的方法是：

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

请不要使用内联样式！这是一个工作示例http://jsfiddle.net/S5bKq/。

— 爱因斯坦
source
13
对于那些寻求一个动态的高度：stackoverflow.com/questions/396145/...
— pulkitsinghal
1
@ woho87为什么不使用内联样式？出于众所周知的原因，或者对于特定示例，我应该了解更多信息吗？
— Sharky 2014年
@KatrinRaimond是出于众所周知的原因，在此处stackoverflow.com/questions/2612483/…和此处webdesign.about.com/od/css/a/aa073106.htm都有说明。
— 亚历克斯（Alex）
但是，将divElement的顶部设置为“％”单位会使divElement占用垂直空间，除非divElement放置在相对元素内。
— sudip
是位置：固定的还是位置：绝对的？
— Kurkula '16
151

如今，随着无处不在的转换支持，您可以在不知道弹出窗口的宽度/高度的情况下执行此操作

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

简单！JSFiddle在这里：http : //jsfiddle.net/LgSZV/

更新：请查看https://css-tricks.com/centering-css-complete-guide/，以获得有关CSS居中的详尽指南。将其添加到此答案中，因为它似乎引起了很多关注。

— XwipeoutX
source
1
如果弹出窗口中的内容正在使用overflow:auto，则IE9中的滚动会被拧紧。：（
— joescii 2014年
2
并非如此。IE8仍然占有20％的浏览器份额，并且不支持它。因此，仅将此版本用于IE9 +。
— fotanus 2014年
7
+1是唯一无需指定高度和宽度或使用Javascript的解决方案。
— Jan Derk 2014年
当开发人员停止支持IE 9 <@fotanus时，用户将迁移或更新其浏览器。
— Diego Vieira 2015年
不幸的是，@ DIegoVieira这不是工作方式。见公地的悲剧。因此，人们将继续支持IE8，因为它不想失去这一份额，而人们将继续使用IE8，因为它可以工作。
— fotanus
33

设置宽度和高度，您就很好。

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

如果您希望元素尺寸灵活（并且不关心旧版浏览器），请使用XwipeoutX的答案。

— 埃里克·艾格纳（Erik Aigner）
source
1
这是最干净，最简单的答案，并且对移动设备也很友好。+1
— Rust
22

它适用于任何对象。即使您不知道大小：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
— 发光的人
source
17

现在，使用HTML 5和CSS 3更容易：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>
— 丹尼尔·德莱昂
source
12

如果您有一个固定的div绝对位置，则该位置分别为高度和宽度一半的顶部的50％和左侧和左侧的50％负边距。调整以适应您的需求：

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}
— 氏族
source
9

使用flex。简单得多，无论您的div尺寸大小都可以使用：

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>
展开摘要

— 坎纳
source
3

我会在CSS中执行此操作：

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

然后在HTML中：

<div class="centered"></div>
— 爱德华多·拉戈·阿吉拉尔
source
0

试试这个

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

或这个

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>
— 大理
source
0

另一种简单灵活的方法来在中心显示块：使用line-height和进行本机文本对齐text-align。

解：

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

和html示例：

<div class="parent">
  <div class="child">My center block</div>
</div>

我们div.parent全屏显示，他的独生子与div.child对齐display: inline-block。

优点：

  • 灵活性，无绝对值
  • 支持调整大小
  • 在手机上工作正常

JSFiddle上的简单示例：https ://jsfiddle.net/k9u6ma8g

— 帕维尔·肖罗霍夫（Pavel Shorokhov）
source
0

不使用绝对职位的替代解决方案：
我看到很多绝对职位答案。我不能在不破坏其他东西的情况下使用绝对位置。因此，对于那些做不到的人，这是我的工作：
https : //stackoverflow.com/a/58622840/6546317（针对另一个问题发布）。

该解决方案仅专注于垂直居中，因为我的子元素已经处于水平居中状态，但是如果您不能以其他方式将它们水平居中，则可以应用相同的方法。

— 红变的
source
-2

试试这个：

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;
— 用户名
source
2
这实际上与接受的答案相同
— apaul
是的，但是在这里我解释了上边距和左边距的操作...某人不知道这一点...
— user3423956
1
然后，它实际上与第二个答案
— apaul
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.