[html] 我如何垂直居中文本与CSS?


Answers

另一种方式(这里没有提到)与Flexbox

只需将以下代码添加到容器元素即可:

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

Flexbox演示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>

或者, 当flex容器中只有一个flex-item (如上面问题中给出的示例) ,flexbox也可以通过容器对齐内容,而flexbox也可以将一个flex项目居中放置一个自动边距

因此,为了使Flex项目在水平和垂直方向居中,只需使用margin:auto

Flexbox演示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>

注意:以上所有内容适用于在水平放置时对中物品。 这也是默认行为,因为默认情况下, flex-direction的值是row 。 但是,如果需要在垂直列中布局弹性项目,则应在容器上设置flex-direction: column以将主轴设置为列,另外justify-contentalign-items属性现在可以使用另一个justify-content: center为中心:垂直居中align-items: center水平align-items: center居中)

flex-direction: column演示

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

从Flexbox开始查看其一些功能并获取最大浏览器支持语法的好地方是flexyboxes

另外,现在的浏览器支持非常好: caniuse

对于display: flex跨浏览器兼容性display: flexalign-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;
Question

我有一个包含文本的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>

做这个的最好方式是什么?




尝试此解决方案

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

使用CSS +构建。




作为参考并添加一个更简单的答案:

纯CSS:

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

或者作为SASS / SCSS Mixin:

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

用途:

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

作者:SebastianEkström的博客文章垂直对齐任何只有3行CSS

由于该元素被放置在“半像素”上,该方法可能导致元素模糊。 解决方法是将其父元素设置为保留-3d。 如下所示:

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

我们生活在2015+以及Flex Box由每个主流的现代浏览器支持。

这将是网站从这里出来的方式。

学习它!




我需要一排可点击的大象,垂直居中,但没有使用表格来解决某些Internet Explorer 9的怪异问题。

我最终找到了最好的CSS(满足我的需求),并且在Firefox,Chrome和Internet Explorer 11中表现出色。可悲的是,Internet Explorer 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>

显然你不需要边界,但他们可以帮助你看到它的工作原理。




其他方式:

不要设置divheight属性,而是使用padding:来实现效果。 与行高一样,它只适用于有一行文字的情况。 虽然这样,如果你有更多的内容,文本仍然会居中,但是div本身会稍微大一些。

所以,而不是与:

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的顶部和底部padding设置为60px ,并将左侧和右侧padding设置为零,使div 120px(加上字体的高度)变高,并将文本垂直居中放置在div中。




简单而通用的方式是(如michielvoo表格方式):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

在父标签上使用此属性(或同等类)即使对许多孩子也可以对齐:

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



我看到了以前的答案,它们只能用于屏幕宽度(不响应)。 为了响应你必须使用flex,

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



我不确定是否有人走过writing-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演示让你小提琴。

Caniuse支持 :85.22%+ 6.26%= 91.48% (即使IE在!)




尝试下面的代码:

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>




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

将这个小代码添加到元素的CSS属性中。 太棒了。 尝试一下!




一个非常简单和最强大的解决方案,垂直对齐中心:

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




.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>




在CSS3中引入的Flexbox是解决方案:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

注意 :如果要将文本居中,请将上面标记为重要的行替换为以下行之一:

1)仅垂直:

margin: auto 0;

2)只有水平方向:

margin: 0 auto;



灵活的方法

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>




<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>



Links