当前位置： 文江博客 话题详情

如何使用CSS垂直将DIV元素集成为DIV元素？

发布于 2025-02-12 23:35:56 字数 286 浏览 0 评论 0 原文

我想用CSS垂直将 Div 中心。我不想要桌子或JavaScript，而只需要纯CSS。我找到了一些解决方案，但是所有解决方案都缺少Internet Explorer 6支持。

<body>
    <div>Div to be aligned vertically</div>
</body>

我如何在包括Internet Explorer 6在内的所有主要浏览器中垂直将 Div 归为中心？

原文

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.

<body>
    <div>Div to be aligned vertically</div>
</body>

How can I center a div vertically in all major browsers, including Internet Explorer 6?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（30）

萌化 2025-02-19 23:35:57

不幸的是，但毫不奇怪 - 该解决方案比人们希望的要复杂。同样不幸的是，您需要在想要垂直居中的DIV周围使用其他DIV。

对于符合标准的浏览器，例如Mozilla，Opera，Safari等。 /em> - 然后可以垂直以中心为中心。对于Internet Explorer，您需要位置 在外部div中绝对，然后将 top 指定为 50％。以下页面很好地解释了此技术，并提供了一些代码示例：

  • 垂直以未知高度（Internet＆nbsp; explorer＆nbsp; 7兼容）的CSS为中心（Wayback Machine提供的存档文章）

也有一种技术可以使用JavaScript进行垂直中心。 < CSS 证明了这一点。

Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.

For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%. The following pages explain this technique well and provide some code samples too:

There is also a technique to do the vertical centering using JavaScript. Vertical alignment of content with JavaScript & CSS demonstrates it.

回复 原文
森末i 2025-02-19 23:35:57

如果有人关心Internet＆nbsp; explorer＆nbsp; 10（及以后），请使用

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Flexbox支持： http://caniuse.com/flexbox

If someone cares for Internet Explorer 10 (and later) only, use Flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Flexbox support: http://caniuse.com/flexbox

回复 原文
很酷不放纵 2025-02-19 23:35:57

一种垂直集中元素的现代方法是使用 flexbox 。

您需要父母来决定身高和一个孩子以中心。

下面的示例将以浏览器内的中心为中心。重要的是（在我的示例中）是设置高度：100％ to body 和 html html ，然后 min-heivy：100％ 到您的容器。

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

A modern way to center an element vertically would be to use flexbox.

You need a parent to decide the height and a child to center.

The example below will center a div to the center within your browser. What's important (in my example) is to set height: 100% to body and html and then min-height: 100% to your container.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

回复 原文
混吃等死 2025-02-19 23:35:57 
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

相关：中心图像

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Related: Center a Image

回复 原文
梦回梦里 2025-02-19 23:35:57

仅在您不关心Internet Explorer 6和7时垂直居中

，您可以使用涉及两个容器的技术。

外部容器：

  • 应该具有显示：表;

内置容器：

  • 应有 display：table-cell;
  • 应具有 fertical-align：中间;

内容框：

  • 应该具有显示：inline-block;

您可以将您想要的任何内容添加到内容框中，而无需关心其宽度或高度！

演示：

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

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

另请参见 这个小提琴 ！

水平和垂直居中，

如果您想水平和垂直居中，则还需要以下内容。

内部容器：

  • 应具有文本壁：中心;

内容框：

  • 应该重新调整水平文本对齐，例如 text-align：left; left; ore代码> text-align：正确; ，除非您希望文本为中心

demo：

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">
         Malcolm in the Middle
     </div>
   </div>
</div>

另请参见 这个小提琴 ！

Centering only vertically

If you don't care about Internet Explorer 6 and 7, you can use a technique that involves two containers.

The outer container:

  • should have display: table;

The inner container:

  • should have display: table-cell;
  • should have vertical-align: middle;

The content box:

  • should have display: inline-block;

You can add any content you want to the content box without caring about its width or height!

Demo:

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

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

See also this Fiddle!

Centering horizontally and vertically

If you want to center both horizontally and vertically, you also need the following.

The inner container:

  • should have text-align: center;

The content box:

  • should re-adjust the horizontal text-alignment to for example text-align: left; or text-align: right;, unless you want text to be centered

Demo:

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">
         Malcolm in the Middle
     </div>
   </div>
</div>

See also this Fiddle!

回复 原文
行至春深 2025-02-19 23:35:57

它可以通过两种方式完成

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

，也可以

使用Flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

Align-Items：Center; 使内容垂直中心

Jusify-content：Center; 使内容水平中心

It can be done in two ways

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

OR

Using flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

align-items:center; makes the content vertically center

justify-content: center;makes the content horizontally center

回复 原文
诺曦 2025-02-19 23:35:57

当我必须回到时，我总是去的地方。

对于那些不想进行跳跃的人：

  1. 将父容器指定为位置：相对或位置：绝对。
  2. 指定子容器的固定高度。
  3. SET 位置：绝对和顶部：在子容器上的50％将上移到父母中间。
  4. 设置保证金顶：-yy，yy是子容器高度的一半以抵消项目的一半。

代码中的一个示例：

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

This is always where I go when I have to come back to this issue.

For those who don't want to make the jump:

  1. Specify the parent container as position:relative or position:absolute.
  2. Specify a fixed height on the child container.
  3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
  4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
回复 原文
雨夜星沙 2025-02-19 23:35:57

我刚刚写了这篇CSS并了解更多信息，请仔细阅读：本文具有垂直的任何内容，只需3行CSS 。

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

I just wrote this CSS and to know more, please go through: This article with vertical align anything with just 3 lines of CSS.

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
回复 原文
羁绊已千年 2025-02-19 23:35:57

CSS网格

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>

CSS Grid

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>

回复 原文
無心 2025-02-19 23:35:57

对于新来者，请尝试：

display: flex;
align-items: center;
justify-content: center;

For newcomers, please try:

display: flex;
align-items: center;
justify-content: center;
回复 原文
离线来电— 2025-02-19 23:35:57

使用转换实际上在现代浏览器和Internet＆nbsp“ Explorer上使用的三行代码：

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

我正在添加此答案，因为我在以前的版本中发现了此答案的某些不完整性（并且堆栈溢出不允许我简单评论）。

  1. '位置'相对会使样式弄乱，如果当前的DIV在体内并且没有容器div。但是“固定”似乎有效，但显然可以修复视口中心的内容
    “位置：相对”

    '>

  2. 也我也使用了这种造型将某些覆盖层的divs居中，并在Mozilla中发现了这种转换的所有元素Div失去了底部的边界。可能是一个渲染问题。但是，仅在其中一些添加最小的填充物将其正确渲染。 Chrome和Internet＆nbsp; Explorer（令人惊讶的是）渲染了盒子，而无需填充
    “无内部桨”
    “带有桨板的mozilla”

The three lines of code using transform works practically on modern browsers and Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

I am adding this answer since I found some incompleteness in the previous version of this answer (and Stack Overflow won't allow me to simply comment).

  1. 'position' relative messes up the styling if the current div is in the body and has no container div. However 'fixed' seems to work, but it obviously fixes the content in the center of the viewport
    position: relative

  2. Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders. Possibly a rendering issue. But adding just the minimal padding to some of them rendered it correctly. Chrome and Internet Explorer (surprisingly) rendered the boxes without any need for padding
    mozilla without inner paddings
    mozilla with paddings

回复 原文
我恋#小黄人 2025-02-19 23:35:57 
.center{
    display: grid;
    place-items: center;
}

.center{
    display: grid;
    place-items: center;
}
回复 原文
简单 2025-02-19 23:35:57

Billbad的答案仅适用于 .inner div的固定宽度。
该解决方案可通过添加属性<代码>文本align：中心到 .outer div来实现动态宽度。

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

The answer from Billbad only works with a fixed width of the .inner div.
This solution works for a dynamic width by adding the attribute text-align: center to the .outer div.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

回复 原文
与往事干杯 2025-02-19 23:35:57

只需做到：在您的 div 上添加类：

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

并阅读本文用于解释。注意：高度是必要的。

Just do it: Add the class at your div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

And read this article for an explanation. Note: Height is necessary.

回复 原文
尤怨 2025-02-19 23:35:57

没有回答浏览器兼容性，而是要提及新的网格和不那么新的Flexbox功能。

Grid

From:

浏览器支持： noreflow noreferrer“> grid browser support

CSS：

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

html：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

flexbox

浏览器支持： flexbox浏览器支持

CSS：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Not answering for browser compatibility but to also mention the new Grid and the not so new Flexbox feature.

Grid

From: Mozilla - Grid Documentation - Align Div Vertically

Browser Support: Grid Browser Support

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Browser Support: Flexbox Browser Support

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
回复 原文
巨坚强 2025-02-19 23:35:57

我这样做了（相应地更改宽度，高度，边缘顶部和边缘左侧）：

.wrapper {
    width: 960px;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -480px;
}

<div class="wrapper"> -- Content -- </div>

I did it with this (change width, height, margin-top and margin-left accordingly):

.wrapper {
    width: 960px;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -480px;
}

<div class="wrapper"> -- Content -- </div>
回复 原文
甜柠檬 2025-02-19 23:35:57

我认为无需使用Flexbox的所有浏览器一个可靠的解决方案 - “ Align -Items：Center;”；是显示的组合：桌子和垂直空间：中间;。

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

html‣demo

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

： https://jsfiddle.net/6m640rpp/

I think a solid solution for all browsers without using Flexbox - "align-items: center;" is a combination of display: table and vertical-align: middle;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/

回复 原文
浅浅淡淡 2025-02-19 23:35:57

现在，我们可以在块布局上使用 Align-Content ，而无需FlexBox或CSS网格。

您可以使用最新版本的Chrome测试以下内容。

body {
  margin: 0;
  min-height: 100vh;
  align-content: center; /* vertical centering*/
}

/* the below is for horizontal centering (irrelevant to the question) */
div {
  width: fit-content;
  margin: auto;
}
<div>Div to be aligned vertically</div>

Now we can use the align-content on block layouts without the need of flexbox or CSS grid.

You can test the below using the latest version of chrome.

body {
  margin: 0;
  min-height: 100vh;
  align-content: center; /* vertical centering*/
}

/* the below is for horizontal centering (irrelevant to the question) */
div {
  width: fit-content;
  margin: auto;
}
<div>Div to be aligned vertically</div>

回复 原文
葬﹪忆之殇 2025-02-19 23:35:57

特别是对于具有相对（未知）高度的父级，以未知为中心解决方案对我有好处。文章中有一些非常不错的代码示例。

它在Chrome，Firefox，Opera和Internet＆nbsp; Explorer中进行了测试。

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Especially for parent divs with relative (unknown) height, the centering in the unknown solution works great for me. There are some really nice code examples in the article.

It was tested in Chrome, Firefox, Opera, and Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

回复 原文
萌梦深 2025-02-19 23:35:56

下面是我可以在垂直和水平中构建的最好的全能解决方案，柔性高度内容框。它经过了最近版本的Firefox，Opera，Chrome和Safari的测试和工作。

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

查看一个带有动态内容的工作示例

我构建了一些动态内容来测试灵活性，并希望喜欢知道是否有人看到了任何问题。它也适用于集中的覆盖层 - 灯箱，弹出式等。

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

View A Working Example With Dynamic Content

I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.

回复 原文
魔法少女 2025-02-19 23:35:56

最简单的方法是以下 CSS的三行：

1）位置：相对;

2）顶部：50％;

3 ）变换：translatey（-50％）;

以下是示例：

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

The simplest way would be the following three lines of CSS:

1) position: relative;

2) top: 50%;

3) transform: translateY(-50%);

Following is an example:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

回复 原文
酸甜透明夹心 2025-02-19 23:35:56

我再也看不到列表：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • 跨浏览器（包括Internet＆nbsp; nbsp; 8- Internet Explyer＆nbsp; nbsp; 10没有黑客！）
  • 响应百分比和最小/最大的
  • 填充物，无论填充如何）
  • 高度必须声明（请参见“ nofollow noreferrer”>变量高度
  • href =“ https://www.smashingmagazine.com/2013/08/absolute-horizo ​​ntal-vertical-centering-centering-css/#height ：auto 以防止内容溢出（请参阅溢出）

来源：绝对水平和垂直中心CSS

One more I can't see on the list:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Cross-browser (including Internet Explorer 8 - Internet Explorer 10 without hacks!)
  • Responsive with percentages and min-/max-
  • Centered regardless of padding (without box-sizing!)
  • height must be declared (see Variable Height)
  • Recommended setting overflow: auto to prevent content spillover (see Overflow)

Source: Absolute Horizontal And Vertical Centering In CSS

回复 原文
一百个冬季 2025-02-19 23:35:56

现在 flexbox 解决方案是现代浏览器的一种非常简单的方法，所以我为您推荐这一点，所以我推荐这一点：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: green;
}

body,
html {
  height: 100%;
}
<div class="container">
  <div>Div to be aligned vertically</div>
</div>

Now the Flexbox solution is a very easy way for modern browsers, so I recommend this for you:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: green;
}

body,
html {
  height: 100%;
}
<div class="container">
  <div>Div to be aligned vertically</div>
</div>

回复 原文
一个人的旅程 2025-02-19 23:35:56

实际上，您需要两个Div才能进行垂直居中。包含内容的DIV必须具有宽度和高度。

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* Half of #content height */
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

这是结果。

Actually, you need two div's for vertical centering. The div containing the content must have a width and height.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* Half of #content height */
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Here is the result.

回复 原文
究竟谁懂我的在乎 2025-02-19 23:35:56

编辑2020：仅在需要支持旧浏览器之类的 Internet＆nbsp; explorer＆nbsp; 8 （哪个（哪个）（您应该拒绝做

Edit 2020: only use this if you need to support old browsers like Internet Explorer 8 (which you should refuse to do ????). If not, use Flexbox.

This is the simplest method I found and I use it all the time
(jsFiddle demo here).

Thank Chris Coyier from CSS Tricks for this article.

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%;
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Support starts with Internet Explorer 8.

回复 原文
冰魂雪魄 2025-02-19 23:35:56

经过大量研究，我终于找到了最终解决方案。它甚至适用于漂浮元素。 查看源

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

After a lot of research I finally found the ultimate solution. It works even for floated elements. View Source 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
回复 原文
时光沙漏 2025-02-19 23:35:56 
html, body {
    height: 100%;
    margin: 0;
}

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>

html, body {
    height: 100%;
    margin: 0;
}

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>

回复 原文
顾忌 2025-02-19 23:35:56

要将Div居中在页面上，检查小提琴链接。

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

另一个选项是使用Flex Box，检查小提琴链接。

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

另一个选择是使用CSS 3转换：

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

To center the div on a page, check the fiddle link.

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

Another option is to use flex box, check the fiddle link.

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Another option is to use a CSS 3 transform:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

回复 原文
孤单情人 2025-02-19 23:35:56

最简单的解决方案如下：

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align: center;
  border: 1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

The easiest solution is below:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align: center;
  border: 1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

回复 原文
御守 2025-02-19 23:35:56

有多种方法可以实现这一目标。

使用CSS的Flex属性。

解决方案＃1 

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>

或使用使用显示：flex; and 保证金：auto;

解决方案＃2 

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}
<div class="parent">
    <div class="child"></div>
</div>

显示文本中心

解决方案＃3

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

使用百分比（％）高度和宽度。

解决方案＃4

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>

There are multiple ways to achieve this.

Using flex property of CSS.

Solution #1

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>

or by using display: flex; and margin: auto;

Solution #2

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}
<div class="parent">
    <div class="child"></div>
</div>

show text center

Solution #3

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

Using percentage(%) height and width.

Solution #4

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>

回复 原文
~没有更多了~

关于作者

陌路黄昏

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文