中心所有内容 - 响应？

Question

＆＃13;

＆＃13;

.row {
    width: 100%;
    height: 150px;
}

.col {
    display: inline-block;
    margin: 0 auto;
    height: 150px;
}

#left {
    float: left;
    width: 30%;
    height: 150px;
    background-color: red;
}

#center {
    width: 40%;
    height: 100%;
    background-color: green;
}

#right {
    float: right;
    width: 30%;
    background-color: blue;
}

＆＃13;

<header>
    <div class="row">
        <div class="col" id="left">
            Test Test Text
        </div>
        <div class="col" id="center">
            Image
        </div>
        <div class="col" id="right">
            Text Image
        </div>
    </div>
</header>

＆＃13;

＆＃13;

＆＃13;

我已阅读了很多帖子，但仍然无法完成这项工作。我错过了什么。我希望在标题中包含这三个div。中心div应位于页面中间的中心，它将是一个图像。其他div将在左侧和右侧，并根据需要组合文本和图像。我希望所有3个div都能使其内容垂直和水平居中。如何执行此操作并在div浏览器和屏幕大小上为用户保持一定的响应能力。响应性是次要问题，使内容保持一致是主要的挑战。谢谢，

Answer 1

您可以将display: table用于行，display: table-cell用于列

＆＃13;

＆＃13;

.row {
    width: 100%;
    height: 150px;
    display: table;
}

.col {
    width: 30%;
    height: 150px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#left {
    background-color: red;
}

#center {
    width: 40%;
    background-color: green;
}

#right {
    background-color: blue;
}

＆＃13;

<header>
<div class="row">
	<div class="col" id="left">
      Test Test Text
    </div>
	<div class="col" id="center">
		Image
	</div>
	<div class="col" id="right">
		Text Image
	</div>
</div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用CSS3 flexbox：

.row, .col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.col {
    height: 200px;
    flex: 1 100%;
}

#left {
    background-color: red;
}

#center {
    background-color: green;
}

#right {
    background-color: blue;
}

<header>
    <div class="row">
        <div class="col" id="left">
            Test Test Text
        </div>
        <div class="col" id="center">
            Image
        </div>
        <div class="col" id="right">
            Text Image
        </div>
    </div>
</header>

JSFiddle