How do I centralize the content of an element vertically?

Question

How do I centralize the content of an element vertically?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Well, I want to centralize the contents of a div, vertically.

My div, is inside another div that is the container:

DIV Container:

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

DIV I want to centralize 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 this?

Thank you.

css

asked by anonymous 19.03.2017 / 23:46

2 answers

Check Interval between time on a given day of the week My site does not load all the scripts, is it heavy? how to solve? [closed]

score 1 · Answer 1

I particularly like using calc , and here I did the following:

.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>

score 0 · Answer 2

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, ie 100vh = 100%; but it is a static element, measures like vw can do a relative work, measures like this do not support old browsers mainly the standard android browser, so 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>