How do I center the content of an element vertically?

Asked

Viewed 72 times

0

Well, I intend to centralize the contents of a div, at a vertical level.

My div, she’s inside another div that’s the container:

DIV Container:

container{
margin-left:10%;
margin-right:10%;
width:80%;  
position:relative;
height:100%;
}

DIV I intend to center Vertically:

.status{
position:absolute;
width:55%;
height:6%;
border-style: solid;
border-width: 0.1px;
margin-top:16.8%;
margin-left:44.8%;
font-family:proxima_nova_cn_rgregular,sans-serif;
}

How can I do that?

Thank you.

css

2 answers

1

I particularly like to use calc, and here I did as follows:

.div-pai .div-filha { top: calc(metade da altura da div pai - metade da altura da div filha) }

Follows:

.a {
  width: 300px;
  height: 200px;
  background-color: #ddd;
  position: relative;
}
.a .b {
  width: 100px;
  height: 40px;
  background-color: #f1f1f1;
  top: calc(100px - 20px);
  left: calc(150px - 50px);
  position: absolute;
}
<div class="a">
  <div class="b">
    content
  </div>
</div>

0

There is no sense in heigth: 100% in a parent div, unless it is in another container with some heigth set, an alternative is the use of the vh unit that is based on the height of your window, that is 100vh = 100%; but it is a static element, measures like vw can do relative work, measures like this do not support old browsers mainly the default android browser, for this reason I recommend studying techniques like flexbox. 

*{
  box-sizing: border-box;
}
.container{
margin-left:10%;
margin-right:10%;
width:80%;  
position:relative;
height:100vh; /* regule aqui */
border: 1px black solid;
display: flex;
align-items: center;
}
.status{
//position:absolute;
width:55%;
height:20px;
border: 1px black solid;
margin-left:50%;
font-family:proxima_nova_cn_rgregular,sans-serif;
}
<div class="container">
    
    <div class="status">
      teste
    </div>
    
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.