我们可以使用CSS函数计算来计算元素的大小，然后相应地定位子元素。

示例HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

和CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;
}

.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}

a {
    color: white;
    text-decoration: none;
}

演示创建在这里:https://jsfiddle.net/xnjq1t22/

这个解决方案工作良好的响应div高度和宽度以及。

注意:没有测试calc函数与旧浏览器的兼容性。

在父div中创建中央子div的三种方法

绝对定位法 Flexbox方法 变换/翻译方法

Demo

/* Absolute Positioning Method */ .parent1 { background: darkcyan; width: 200px; height: 200px; position: relative; } .child1 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; margin: -15px; } /* Flexbox Method */ .parent2 { display: flex; justify-content: center; align-items: center; background: darkcyan; height: 200px; width: 200px; } .child2 { background: white; height: 30px; width: 30px; } /* Transform/Translate Method */ .parent3 { position: relative; height: 200px; width: 200px; background: darkcyan; } .child3 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div class="parent1"> <div class="child1"></div> </div> <hr /> <div class="parent2"> <div class="child2"></div> </div> <hr /> <div class="parent3"> <div class="child3"></div> </div>

几乎所有的方法都需要指定高度，但通常我们没有任何高度。

这里有一个css3的三行技巧，它不需要知道高度。

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

甚至在IE9中也支持它。

与其供应商前缀:

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

来源:垂直对齐任何只需3行CSS

下面是另一种(响应性的)方法:

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

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

垂直和水平对齐元素

使用它们中的任何一个。结果是一样的:

引导4 CSS3

1. 引导4.3 +

垂直对齐:d-flex align-items-center

水平对齐:d-flex justify-content-center

垂直和水平对齐:d-flex align-items-center justify-content-center

.container { 身高:180 px; 宽度:100%; background - color: blueviolet; ｝ .container > div { 背景颜色:白色; 填充:1快速眼动; ｝ <链接的href = " https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " rel = "样式表" / > <div class="d-flex align-items-center - align- content-center container"> <div>我在中心</div> < / div >

2. CSS 3

.container { 身高:180 px; 宽度:100%; background - color: blueviolet; ｝ .container > div { 背景颜色:白色; 填充:1快速眼动; ｝ .center { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ <div class="集装箱中心"> <div>我在中心</div> < / div >

这招对我很管用:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}