在Div的精确中心显示图像和文本

I am trying to write my own CSS that emulates the design of this website. Currently I have my screen divided into four sections using this code:

我正在尝试编写自己的CSS来模拟本网站的设计。目前，我使用此代码将屏幕分为四个部分：

HTML:

HTML：

  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1"></div>
    </a>
    <div class="part2"></div>
    <div class="part3"></div>
    <a href="URL">
    <div class="part4"></div>
    </a>


  </body>

CSS:

CSS：

 html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}

I want to place an some text and an image below that text directly in the center of each div I have created. I attempted this, but could only get the text to display at the top of each div, not dead center. How could I do this?

我想在我创建的每个div的中心直接放置一些文本和图像。我尝试了这个，但只能让文本显示在每个div的顶部，而不是死点。我怎么能这样做？

Here is a fiddle of my current layout.

这是我当前布局的一个小提琴。

5 个解决方案

#1

You could use flexbox. Here is your code solved using flexbox: https://jsfiddle.net/r49t61ka/ But I highly recommend you to take a look on this article: A Guide to Flexbox

你可以使用flexbox。以下是使用flexbox解决的代码：https：//jsfiddle.net/r49t61ka/但我强烈建议您查看这篇文章：Flexbox指南

.part{
  display:flex;
  justify-content: center; //Center the element horizontally
  align-items: center; //Center the element vertically
 }



<a href="URL">
    <div class="part1 part">asd</div>
    </a>
    <div class="part2 part">asd</div>
    <div class="part3 part">asdsd</div>
    <a href="URL">
    <div class="part4 part">asdsdsd</div>
    </a>

#2

You can do something like this:

你可以这样做：

html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
  
.part1 {background-color:#722F37; width:50%; height:50%; float:left; position: relative; }
.part2 {background-color:#FFC987; width:50%; height:50%; float:left; position: relative;}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left; position: relative;}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left; position: relative;}

.part1 label, .part2 label, .part3 label, .part4 label { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  margin: 0px auto;
  transform: translateX(-50%); 
}

  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1">
      <label>I'm centered</label>
    </div>
    </a>
    <div class="part2">
      <label>I'm centered</label>
    </div>
    <div class="part3">
      <label>I'm centered</label>
    </div>
    <a href="URL">
    <div class="part4">
      <label>I'm centered</label>
    </div>
    </a>


  </body>

Also, Read this article, it is exactly about what you are trying to achieve, but in three different ways with code examples https://www.devplayground.net/align-element-vertically-center-using-css/

另外，阅读本文，它正是您要实现的目标，但是以三种不同的方式使用代码示例https://www.devplayground.net/align-element-vertically-center-using-css/

#3

Wrap your content in another div and set the following rules to it:

将您的内容包装在另一个div中，并为其设置以下规则：

.innerBlock {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

Here is the working jsfiddle: https://jsfiddle.net/c95yyywr/1/

这是工作的jsfiddle：https：//jsfiddle.net/c95yyywr/1/

And here is the snippet:

以下是片段：

 html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}

.innerBlock {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

p {
  padding: 0;
  margin: 0 0 6px 0;
}

img {
  max-height: 30px;
}

  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1">
      <div class="innerBlock">
      <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    </a>
    <div class="part2">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <div class="part3">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <a href="URL">
    <div class="part4">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    </a>


  </body>

#4

You can add a property in each div element like this:

您可以在每个div元素中添加一个属性，如下所示：

div {
  display: table;
  text-align: center;
  ...
}

And the element that is inside the div assign the following display (for example, if you want to align a h1 that is inside the div element):

div中的元素分配以下显示（例如，如果要对齐div元素内的h1）：

h1 {
  display: table-cell;
  vertical-align: middle;
}

This is really helpful when you want to align an element at exactly center (vertical and horizontal). Hope this help.

当您想要将元素准确对齐（垂直和水平）时，这非常有用。希望这有帮助。

Your code should look like this:

您的代码应如下所示：

<body>
  <div class="topnav">
    Welcome to TBD
  </div>
  <a href="URL">
  <div class="part1"><h1>Text</h1></div>
  </a>
  <div class="part2"><h1>Text2</h1></div>
  <div class="part3"><h1>Text3</h1></div>
  <a href="URL">
  <div class="part4"><h1>Text4</h1></div>
  </a>
</body>

And your css file:

和你的CSS文件：

html,body 
{
  padding:0;
  margin:0;
  height:100%;
  min-height:100%;
}
.part1 {display: table; text-align: center; background-color:#722F37; width:50%; height:50%; float:left}
.part2 {display: table; text-align: center; background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {display: table; text-align: center; background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {display: table; text-align: center; background-color:#7F171F; width:50%; height:50%; float:left}
h1 {display: table-cell; vertical-align: middle;}

#5

-1

I would highly recommend using flexbox for this. You can set each of those div's to be "display: flex", "justify-content: center" and "align-items: center". CSS-Tricks has a great guide for using flexboxes. I swear by them.

我强烈建议使用flexbox。您可以将每个div设置为“display：flex”，“justify-content：center”和“align-items：center”。 CSS-Tricks有一个很好的使用flexbox的指南。我发誓他们。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#1