如果你喜欢它没有flexbox，网格，表格或垂直对齐:中间;

你可以:

HTML

<div class="box">
    <h2 class="box__label">square</h2>
</div>

CSS

.box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px solid black;
}

.box__label {
    box-sizing: border-box;
    display: inline-block;
    transform: translateY(50%);
    text-align: center;
    border: 1px solid black;
}

对我来说，最简单和最干净的解决方案是使用CSS3属性“transform”:

.container { 位置:相对; ｝ .container a { 位置:绝对的; 上图:50%; 变换:翻译(0 -50%); ｝ < div class = "容器" > <a href="#">Hello world!< / > < / div >

.align { display: flex; width: 400px; height: 400px; border: solid 1px black; align-items: center; justify-content: space-around; } .align div:first-child { width: 20px; height: 20px; background-color: red; position: absolute; } .align div { width: 20px; height: 20px; background-color: blue; } <div class='align'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

第一个子将在中心垂直和水平对齐

CSS网格:位置项

最后，我们有place-items: center for CSS Grid以使它更容易。

HTML

<div class="parent">
  <div class="to-center"></div>
</div>

CSS

.parent {
  display: grid;
  place-items: center;
}

输出:

超文本标记语言 身体{ 高度:100%; ｝ .container { 显示:网格; 名:中心; 高度:100%; ｝ .center { 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; 填充:10 px; ｝ < div class = "容器" > <div class="center" contenteditable>我总是超级集中在我的父母</div> < / div >

为了使元素垂直和水平居中，我们还可以使用下面提到的属性。

这个CSS属性垂直对齐项目，并接受以下值:

flex-start:项目对齐到容器的顶部。

flex-end:物品与容器底部对齐。

center:物品在容器的垂直中心对齐。

baseline:项目显示在容器的基线。

拉伸:物品被拉伸以适应容器。

这个CSS属性justify-content，用于水平对齐项目，并接受以下值:

flex-start:项目对齐到容器的左侧。

flex-end:物品对齐到容器的右侧。

center:项目在容器的中心对齐。

space-between:项目之间以相等的间距显示。

space-around:物品以等距显示。

另一种方法是使用表:

<div style="border:2px solid #8AC007;身高:200 px;宽度:200 px;" > <表风格= "宽度:100%;高度:100%”> < tr风格= "高度:100%”> < td风格= "高度:100%;Text-align:center">你好，这里有多行，这太长了，太棒了，伙计</td> < / tr > 表> < / < / div >