Html 使用“垂直对齐”将按钮垂直居中放置在div中

目标是将按钮水平和垂直居中放置在div中。水平已处理，但垂直对齐有问题

从“垂直对齐”（on

vertical align

）中可以看出，使用

middle

会产生以下结果：

“元素放置在父元素的中间”

在我的问题（）中，我将父元素中按钮的CSS设置为垂直对齐（据我所知）

HTML:

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST'>
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

* {
font-family:'Arial', Arial, sans-serif;
padding: 0;
margin: 0;
}

h1 {
    padding: 2.1vh 0;
    font-size: 6vmin;
}

div#titleSection {
    width: 100%;
    height: 12vh;
    border: 2.5px solid #ff0fff;
}

div.title-inner {
    height: 100%;
    text-align: center;
    display:inline-block;
}

div.quarter-width { width: 25%; }
div.third-width { width: 33.3%; }
div.half-width { width: 50%; }

div.left {
    float: left;
    background-color: rgba(255, 0, 0, 0.5);
}

div.center {
    float: center;
    background-color: rgba(0, 255, 0, 0.5);
}

div.right {
    float:right;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    vertical-align: middle;
}

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST' id="button1">
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

$(document).ready(function() {
    var OuterHeight = $('#titleSection').height();
    var InnerHeight = $('#button1').height();
    var TopMargin = (OuterHeight-InnerHeight)/2;
    $('#button1').css('margin-top', TopMargin);   
});

我是否错误地认为父元素是

title internal

div

我还尝试将CSS设置为：

.title-inner form { vertical-align: middle; }

无济于事

---

总而言之：JSFIDLE中显示的所有额外CSS和html只是为了最准确地了解我正在尝试做什么——如果这是不必要的，我表示歉意，但我宁愿保留它，以避免忘记我的位置。最终目标只是（垂直地）将注销按钮置于右侧（蓝色）分区的中心。

垂直对齐属性很难使用，老实说有点痛苦。更可靠的居中方法如下所示：

我在下面实现了这一点

或者像路易斯说的那样使用flexbox，如果你能支持的话

*{
字体系列：'Arial'，Arial，无衬线；
填充：0；
保证金：0；
}
h1{
填充：2.1VH0；
字体大小：6vmin；
}
标题部分{
宽度：100%；
高度：12vh；
边框：2.5px实心#ff0fff；
}
部门名称-内部{
身高：100%；
文本对齐：居中；
显示：内联块；
}
分区四分之一宽度{宽度：25%；}
第三宽度{宽度：33.3%；}
div.half-width{width:50%；}
左分区{
浮动：左；
背景色：rgba（255,0,0,0.5）；
}
分区中心{
浮动：中心；
背景色：rgba（0,255,0,0.5）；
}
右分区{
浮动：对；
位置：相对位置；
背景色：rgba（0,0,255,0.5）；
}
.标题内部按钮{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

注销
标题

我通常使用JS垂直居中，这对我来说似乎没有CSS解决方案复杂。我已经用我的方法更新了你的小提琴：

HTML:

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST'>
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

* {
font-family:'Arial', Arial, sans-serif;
padding: 0;
margin: 0;
}

h1 {
    padding: 2.1vh 0;
    font-size: 6vmin;
}

div#titleSection {
    width: 100%;
    height: 12vh;
    border: 2.5px solid #ff0fff;
}

div.title-inner {
    height: 100%;
    text-align: center;
    display:inline-block;
}

div.quarter-width { width: 25%; }
div.third-width { width: 33.3%; }
div.half-width { width: 50%; }

div.left {
    float: left;
    background-color: rgba(255, 0, 0, 0.5);
}

div.center {
    float: center;
    background-color: rgba(0, 255, 0, 0.5);
}

div.right {
    float:right;
    background-color: rgba(0, 0, 255, 0.5);
}

.title-inner button {
    vertical-align: middle;
}

<div id='titleSection'>
  <div class='title-inner right quarter-width'>
    <form action='destroy.php' method='POST' id="button1">
        <button>Log Out</button>
    </form>
  </div>
  <div class='title-inner left quarter-width'>
    <!--nothing-->
  </div>
  <div class='title-inner center half-width'>
        <h1 class='centered-text'>Title</h1>
  </div>
</div>

$(document).ready(function() {
    var OuterHeight = $('#titleSection').height();
    var InnerHeight = $('#button1').height();
    var TopMargin = (OuterHeight-InnerHeight)/2;
    $('#button1').css('margin-top', TopMargin);   
});

---

您应该为父div设置display:table

div.title-inner {
height: 100%;
text-align: center;
display: table;}

设定

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

---

对于

。title internal form

要归功于@andy Furnis，他通过编辑子元素的CSS获得了垂直对齐问题的答案，如下所示：

.title-inner button {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
}

但是，使用此方法，图元不再保持水平居中。在使用了这种方法之后，我意识到按钮的左边缘是用于水平中心对齐的点。通过在x方向添加变换，元素被移动到正确的位置：

.title-inner button {
    position: absolute;
    top:50%;
    transform: translate(-50%, -50%);
}

请参阅下面的代码片段：

*{
字体系列：'Arial'，Arial，无衬线；
填充：0；
保证金：0；
}
h1{
填充：2.1VH0；
字体大小：6vmin；
}
标题部分{
宽度：100%；
高度：12vh；
边框：2.5px实心#ff0fff；
}
部门名称-内部{
身高：100%；
文本对齐：居中；
显示：内联块；
}
分区四分之一宽度{宽度：25%；}
第三宽度{宽度：33.3%；}
div.half-width{width:50%；}
左分区{
浮动：左；
背景色：rgba（255,0,0,0.5）；
}
分区中心{
浮动：中心；
背景色：rgba（0,255,0,0.5）；
}
右分区{
浮动：对；
位置：相对位置；
背景色：rgba（0,0,255,0.5）；
}
.标题内部按钮{
位置：绝对位置；
最高：50%；
转换：翻译（-50%，-50%）；
}

注销
标题

一个建议是，使用flexbox构建您的结构……您将用更少的css规则和更大的灵活性实现您想要的。-除了flexbox在IE中不起作用之外，它非常糟糕。改用Mozilla开发网络（MDN）文档。还请注意文档中的“垂直对齐CSS属性指定内联单元格或表格单元格框的垂直对齐方式”。因此，除非您的元素是内联单元格或表格单元格，否则垂直对齐不起任何作用。我应该说这需要Jquery:）感谢您的想法；这是实现所需垂直对齐的一种好的、简短的方法。然而：我在问题的开头说，我需要它水平居中太广告你的编辑似乎改变了水平对齐。从我的测试中，我发现这与

位置有关：绝对在tte子元素（按钮）上，但我似乎找不到一种方法来保持两者居中。您可能会注意到按钮的最左侧点居中-是否有简单的编辑使其成为中心点？再次感谢啊是的，我忘了这会让你崩溃。我已经更新了我的答案，将相同的原则用于水平居中。