将 div 中的元素垂直居中答案

【问题标题】：Vertically center elements in a div将 div 中的元素垂直居中
【发布时间】：2017-07-12 12:15:41
【问题描述】：

我想让我的div1 内部元素垂直居中。

正如您在我的div1 display 中看到的，如果我使用display: table-cell，它会垂直对齐元素，但元素会位于顶部而不是居中。

但是如果我使用display: flex，它会保持元素居中但元素水平对齐。

.div1 {
  height: 200px;
  width: 100px;
  background: white;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  display: table-cell;
}

.span1 {
  text-align: center;
  font-size: 22px;
  color: #111;
  display: table-cell;
  vertical-align: middle;
  word-spacing: 100px;
  font-weight: 600;
  max-height: 120px;
  dispaly: block;
  overflow: hidden;
}

.underline {
  position: relative;
  height: 20px;
  width: 100%;
  background: black;
}

<div class="div1">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
</div>

Jsfiddle：https://jsfiddle.net/c15dmfws/

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将 .div1 设置为 display:table;不显示：表格单元格； ...

【讨论】：

【解决方案2】：

更新的sn-p

.div1{
  height:200px;
  width:100px;
  background:white;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  display: table-cell;
}

.span1{
    text-align: center;
    font-size: 22px;
    color: #111;
    display: table-cell;
    vertical-align: middle;
    word-spacing: 100px;
    font-weight: 600;
    max-height: 120px;
    dispaly: block;
    overflow: hidden;
}
.underline{
    position: relative;
    height: 20px;
    width: 100%;
    background: black;
}

<div class="div1">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
</div>

【讨论】：

【解决方案3】：

试试这个。

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            height: 200px;
            width: 100px;
            display: table;
        }
        .div1 {
            
            background: white;
            display: flex;
            text-align: center;
            justify-content: center;
            vertical-align: middle;
            display: table-cell;
        }
        
        .span1 {
            text-align: center;
            font-size: 22px;
            color: #111;
            word-spacing: 100px;
            font-weight: 600;
            max-height: 120px;
            dispaly: block;
            overflow: hidden;
        }
        
        .underline {
            position: relative;
            height: 20px;
            width: 100%;
            background: black;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="div1">
            <span class="span1">God Bless us all.</span>
            <div class="underline"></div>
        </div>
    </div>
</body>

</html>

【讨论】：

【解决方案4】：

正确使用display: flex 可以解决您的问题。

使用属性：

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

如下例：

.one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: black;
}

.two {
  background-color: blue;
 }

<div class="one">
  
  <div class="two">
     hello
  </div>
  
</div>

【讨论】：

【解决方案5】：

这里是https://jsfiddle.net/bn430he1/，试试这个。

将内容包装在另一个 div 中，赋予该 div 的 CSS 属性 height:auto;并删除 display:table-cell;来自 div1

希望对你有帮助...

<div class="div1">
<div class="aligned">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
  </div>
</div>

.aligned {
  height:auto;
}

.div1{
  width:100px;
  background:white;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.span1{
    text-align: center;
    font-size: 22px;
    color: #111;
    display: table-cell;
    vertical-align: middle;
    word-spacing: 100px;
    font-weight: 600;
    max-height: 120px;
    dispaly: block;
    overflow: hidden;
}
.underline{
    position: relative;
    height: 20px;
    width: 100%;
    background: black;
}

【讨论】：

【解决方案6】：

你有很多不必要的代码。我清理了一下。

.div1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100px;
  background: whitesmoke;
}

.span1 {
  text-align: center;
  font-size: 22px;
  color: #111;
  word-spacing: 100px;
  font-weight: 600;
  max-height: 120px;
}

.underline {
  height: 20px;
  width: 100%;
  background: black;
}

<div class="div1">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
</div>

jsFiddle

【讨论】：