Html 将a<；部门>；在页面上垂直和水平？

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

元素的最佳方法

---

我知道

左边距：auto；右边距：自动将以水平方向为中心，但垂直方向的最佳方式是什么？
这是我不久前编写的一个脚本（它是使用jQuery库编写的）：

这个解决方案对我有效

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

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

高度：40%/底部：30%…）
最佳且最灵活的方式
我的

本演示中的主要技巧是，在元素从上到下的正常流动中，因此
边距top:auto
设置为零。但是，绝对定位的元素对自由空间的分布起着相同的作用，同样可以垂直居中于指定的
顶部
和
底部
（在IE7中不起作用）

此技巧适用于任何大小的
div
。

div{
宽度：100px；
高度：100px；
背景色：红色；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
我认为有两种方法可以通过CSS使div中心对齐

.middleDiv{
位置：绝对位置；
宽度：200px；
高度：200px；
左：50%；
最高：50%；
左边距：-100px；/*宽度的一半*/
边缘顶部：-100px；/*高度的一半*/
}

这是最简单最好的方法。有关演示，请访问以下链接：

尽管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的用法如下所示：

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

flex还有其他可用的属性，这些属性将在上面提到的链接中解释，并提供进一步的示例

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

Javascript（JQuery）

jshiddle:
很抱歉回复太晚
最好的办法是

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

上边距和左边距应根据您的div box大小确定

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

根据宽度和高度调整左侧和顶部，即（100%-80%）/2=10%
我知道我参加聚会迟到了，但这里有一种方法可以将未知维度的div置于未知维度父对象的中心

风格：

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>


.桌子{
显示：表格；
身高：100%；
保证金：0自动；
}
.表格单元格{
显示：表格单元格；
垂直对齐：中间对齐；
}
.居中{
背景色：红色；
}

HTML:


居中的

演示：

看看这个。
实际上有一个解决方案，使用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%);
}


文字，图像，任何适合你的。
.parent{
/*高度可以是你想要的任何东西，如果你想要一个孩子，高度也可以是自动的
部门主管负责确定尺寸*/
高度：200px；
}
.将我{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
/*跨浏览器支持所需的前缀*/
-ms转换：translateY（-50%）；
-webkit转换：translateY（-50%）；
}

受所有主流浏览器和IE9及更高版本的支持（不用担心IE8，因为它在今年秋天与WinXP一起消亡了。感谢上帝。）

利用“显示：表格”规则获得的另一种方法（防弹）：

加价

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

另一个答案是

利用Flex显示的简单解决方案

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


这将居中进行

退房

第一个div占据整个屏幕，每个浏览器都有一个display:flex设置。第二个div（居中div）利用display:flex div，其中margin:auto工作得非常出色

注意IE11+兼容性。（IE10 w/前缀）。
这种技术的简单性令人震惊：

（虽然这种方法有它的含义，但如果您只需要将元素置于中心，而不考虑其余内容的流动，那么它很好。请小心使用）

标记：

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

这将使元素水平和垂直居中。没有负边距，只有变换的能力。我们应该已经忘记IE8了，不是吗？
 < P>我正在看拉拉维的VIEW文件，注意到它们中间的文本是完美的。我立刻想起了这个问题。
他们就是这样做的：

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


拉维尔
.集装箱{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
显示：表格；
}
.里面{
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}
此文本居中


结果看起来是这样的：

如果您正在查看新浏览器（IE10+）

然后，可以使用“变换”属性将div对齐到中心

<div class="center-block">this is any div</div>

这里的问题是，您甚至不必指定div的高度和宽度，因为它会自己处理

另外，如果您想将一个div定位在另一个div的中心，那么您可以将外部div的位置指定为相对，然后这个CSS开始为您的div工作

工作原理：<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

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

<div id="container"> 
    <div id="centered"> </div>
</div>

#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;
}

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

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

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

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

<div class="center-block">this is any div</div>

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

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

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

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

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

.parent{
    display: grid;
    place-items: center center;
}