Question

This question already has answers here:

How to center an element horizontally and vertically (28 answers)

How do I vertically align text in a div? (34 answers)

Closed 4 years ago.

我有一份载有案文的“条形”和“条形”内容的“条形”和“div”和“div>”;“>/条形”内容。

这里是我的<条码>和;div>风格:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

实现这一目标的最佳途径是什么?

Answer 1

你可以尝试这一基本办法:

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

它只为单一案文行文,因为我们将线上高度定在装有箱子的高度上。

A more versatile approach

This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Hello World!</span>
</div>

The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div> s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.

Simulating table display

这里是另一个选择,它可能无法在以下网址上工作:http://caniuse.com/css-table”rel=“noreferer”。 b 无需支持的浏览器:表和<代码> 显示:表- 阁下/代码<>。 (基本上只是互联网探索者7)。利用CSS,我们模拟表格行为(因为表格支持纵向调整),而超文本与第二个例子相同:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Hello World!</span>
</div>

Using absolute positioning

这种技术使用一种绝对定位的元素,确定最高、最底层、左和有权0。 http://coding.smapingmagazine.com/08/09/absolute-horizontal-vertical-centering-cs/“rel=“noreferer” Absolute Horizontal And Vertical Centering in CSS>>。

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;
}

<div>
  <span>Hello World!</span>
</div>

Answer 2

另一种方式(此处未提及)是Flex Box 。

在<>内容>中添加以下代码:

display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */

Flexbox demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

或者,除了通过container <>em>对内容加以调整外,弹性箱也可将flex 项目与在软集装箱上只有一个弹性项目(如上所述)。

因此,从横向和纵向角度将弹性项目置于核心位置,将其置于<条码>:auto。

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}

<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

<>0>NB: 以上所有内容均适用于在horizontal rows上放置的物项。这也是默认行为,因为缺席,<代码>flex-direction的价值为row/code>。如果在垂直栏目上需要列出一些弹性项目,那么flex-direction:一栏应当放在集装箱内,将主轴列为一栏,再加列justification-content和align-items>,现在则the other way around with justification-content: Center各垂直和平线>


flex-direction: column demo


.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>



灵活箱的开端,看其某些特点,获得最多浏览器支持的合成物,其位置是flexy Boxes。
此外,现在的浏览器支持非常好:caniuse 。

关于<代码>的交叉浏览器兼容性: flex 和align-items,请您使用以下方法:

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

Answer 3

可以通过增加以下《特别安全法》:

display: table-cell;
vertical-align: middle;

这意味着你们的社会保障局最终会考虑:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

<div id="box">
  Some text
</div>

Answer 4

For reference and to add a simpler answer:

Pure CSS:

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

或作为SASS/SCSSMemin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用:

.class-to-center {
    @include vertical-align;
}

由Sebastian Ekström担任的博客教授缩略语:

这种方法可造成一些要素混杂,因为这一要素被置于“蓝皮书”。解决办法是确定母子元素,以保存-3d。和以下各点一样:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

We live in 2015+ and Flex Box is supported by every major modern browser.

这将是从这里推出的网站。

<><><><> > 学习!>

Answer 5

所有信贷都用于这一链接所有人:@Sebastian Ekström Link ;请通过。 See it in action codepen 。通过阅读上述条款,我还创建了 a demo fiddle 。

在只有三条线路(不包括供应商预设设备)的情况下,我们能够在变革的帮助下做到这一点: 纵然我们不了解其高潮,Y垂直地集中了我们想要的东西。

社会保障局的财产转变通常用于轮换和提升部分,但其翻译方式 Y功能,我们现在可以纵向调整内容。通常,这项工作必须以绝对定位或确定线性,但这些要求你要么了解要素的高度,要么只了解单一线文本等。

因此,我们写道:

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

这是你们所需要的。这是一种与绝对占有制方法类似的技术,但是,由于我们不必须把任何高度放在母体身上或地位上。它从盒子中直接开展工作,甚至在 Internet 9 Exploration !

为了使之更加简单,我们可以将其写成与其供应商的固定组合。

Answer 6

具有CSS3 弹性体的锡mag:

/* Important */
section {
    display: flex;
    display: -webkit-flex;
}
section p {
    /* Key Part */
    margin: auto;
}


/* Unimportant, coloring and UI */
section {
    height: 200px;
    width: 60%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
section p {
    text-align: center;
    font-family: Cantarell, Calibri;
    font-size: 15px;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}

<section>
    <p>
        I m a centered box!<br/>
        Flexboxes are great!
    </p>
</section>

Tip: Replace the line above marked as "Key Part" with one of these lines, if you want to center the text:

只有纵向:
```
margin: auto 0;
```
只有横向:
```
margin: 0 auto;
```

正如我注意到的那样,这一骗局也与电网(即<代码>> 显示:)合作。

Answer 7

这里是使用灵活箱的另一个选择。

#container {
  display: flex;
  height: 200px;
  background: orange;
}

.child {
  margin: auto;
}

<div id="container">
  <div class="child">
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, nemo.</span>
  </div>
</div>

Result

“Enter像在此描述”</p

https://ishadeed.com 参见。

Answer 8

http://www.ohchr.org。

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom: 5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>

Answer 9

我看到了以前的答复,他们只为这种 screen的屏幕(没有反应能力)工作。对响应者来说,必须使用弹性法。

例:

div { display:flex; align-items:center; }

Answer 10

作为答案而接受的解决办法完全是使用<条码>-八条/代码>。这与四分五裂的高度相同,但这一解决办法在案文按两行列出时并不完美。

如果在四舍五入或按多个行文打字,则打字。

#box
{
  display: table-cell;
  vertical-align: middle;
}

详见:

Answer 11

你可以把以下法典作为参考。它与我一样工作:

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

body {
  display: table;
}

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

<div class="centered-text">
  <h1>Yes, it s my landing page</h1>
  <h2>Under construction, coming soon!!!</h2>
</div>

The output of the above code snippet is as follow:

Answer 12

Try ,该解决方案:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Built using CSS+。

Answer 13

你们也可以使用以下财产。

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

Answer 14

另一种方式:

Don t set the hcar/code> Depende of the div , but otherwise use pavention: to achieving the effect. 同样,只有你有一条行文,它才能发挥作用。虽然如此,如果你有更大的内容,案文仍将集中,但四舍五入本身将稍有增加。


因此,不要去做:
div {
  height: 120px;
  line-height: 120px;
}

可以说:
div {
   padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}

这将确定<代码>div至60px的顶和下层<代码>,以及左边和右边<代码>patter至零,使<代码>div120 pixels(加上你的顶峰)高,并将案文纵向放在正文上。

Answer 15

我不敢肯定任何人已经走到<条码>书写-mode的道路上,但我认为,这条路是清洁地解决问题的,并且有<>路面支持:

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I m centered in the vertical and horizontal thing
    </div>
  </div>
</div>

当然,这将与你需要的任何层面(除父母的100%外)合作。如果你不划定边界线,那么熟悉边界线就会有帮助。

JSFiddle demo, 供你回避。

rel=“nofollow noreferer”>Caniuse support :85.22% + 6.26% =91.48% (7个因特网探索者正在!)

Answer 16

www.un.org/Depts/DGACM/index_spanish.htm 你们的所有纵向协调需要!

Declare this Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Then include it in your element:

.element{
    @include vertical-align();
}

Answer 17

甚至对此有更好的想法。你也可以这样做。

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content:   ;
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Answer 18

对于单一行文(或单一特性)来说,你可以采用这一方法:

<>p># Box >有未固定的rel high in %。

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

See a Live demo at JsBin 。 (easier to edit CSS) or JsFiddle(easier to change high of results framework)。

如果你希望以超文本而不是放在中文本中,那么你需要将案文内容列入附加inline 内容和dit # Box:,以便与之相匹配。 (当然,content: property should bemov.)

For example, <div id="box"><span>TextContent</span></div>. In this case, #box::after should be replaced with #box span.

对因特网探索者8的支持,您必须替换<代码>: >。

Answer 19

The simple and versatile way is (as Michielvoo s table approach):

[ctrv]{
    display: table !important;
}

[ctrv] > *{ /* Addressing direct descendants */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* Optional */
}

父母一方使用这种属性(或相等的阶层)甚至使许多儿童能够调和:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Answer 20

处理变卖财产:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Answer 21

a. 一个非常简单、最有力的纵向协调中心解决办法:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}

<div class="outer-div">
  <span class="inner">No data available</span>
</div>

Answer 22

下述代码将四射线放在屏幕中间,而不论屏幕大小或<编码>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>

See more details about flex here 。

Answer 23

遵循以下法典:

display: table-cell;
vertical-align: middle;

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s
</div>

Answer 24

我只想延伸。这基本上只是一个简化版本,如:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

NOTE: comment out part of cssis required for fixed-h8,000 of enclosing div.

Answer 25

我需要一行可点击的精子,以垂直为中心,但是没有使用一张桌子来绕过某些因特网探索者9 we。

我最终找到了最神圣的CSS(满足我的需求),它同 Firefox、 Chrome和因特网探索者11相处。可悲的是,互联网探索者9在我身上仍然很艰难。

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}

<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Obviously you don t need the borders, but they can help you see how it works.

Answer 26

您可在安保部使用定位方法:

Check the result here....

传真:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv {
    position: relative;
    border: 1px solid #DDD;
    height: 300px;
    width: 300px
}
.relativediv p {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

Answer 27

如果你想要纵向中心风格的话,就意味着你可以尝试<代码>:table-cell和vertical-align:middle。

Example:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Answer 28

在<代码>button 内而不是div内订立。如果你不关心其微小的视觉3D效应。

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}

<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

Answer 29

Absolute Positioning and Stretching

如同上述方法一样,首先将父母和子女分别定位为相对和绝对的。情况不同。

在下面的法典中,我再次使用这种方法将儿童横向和纵向集中起来,尽管你只能使用垂直集中的方法。

<><><><>>><>>>>><>>>>>>

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

The idea with this method is to try to get the child element to stretch to all four edges by setting the top, bottom, right, and left vales to 0. Because our child element is smaller than our parent elements it can’t reach all four edges.

但是,在所有四边设置汽车作为差值,会造成对等,并显示我们的子女在母体中心四分五裂。

不幸的是,上述活动在互联网探索者7和以下领域赢得了无所作为的工作,而且与以前的方法一样,儿童部分的内容可能会变得太大,从而导致隐藏。

Answer 30

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

在社会保障局的财产中添加这一小法。这是一种非常麻烦。 !!