Olá, estou com uma dificuldade para posicionar um elemento. 
Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução.
No momento estou usando o position absolute, a div é essa abaixo: 
.form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei:
{position: relative; top: 50%; left: 50%;}
 
 
Alguém pode me ajudar? 
Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?

Boa Tarde,
Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
 
Segue meu código CSS responsável pelas div.
 
.col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
 
<div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
 

 
Alguem sabe oq posso alterar para alinhar elas corretamente ? 

Boa noite.

Estou montando um layout de 3 colunas, no qual as colunas esquerda e direita devem ter larguras fixas de 300px e a coluna central se ajustar no que sobra. Quanto ao layout está tudo OK, exatamente como preciso. Porém, no interior da DIV central, coloquei uma IMG, a qual quero que sempre ocupe 100% da altura dessa DIV e que ela fique centralizada no horizontal, não importando se a largura da DIV na qual esta IMG está contida tenha largura maior ou menor do que a largura da própria IMG. Quanto a ocupar 100% da altura está OK, não importa o como eu redimensione a janela do browser ela está se auto-ajustando como desejado. Porém, ela não está ficando centralizada na horizontal, como é o objetivo. Ela está ficando sempre alinhada à esquerda, exceto quando a largura da DIV é maior que a largura da IMG, aí neste caso sim a IMG está ficando perfeitamente centralizada da DIV contêiner, como é o objetivo. Agora, quando a largura da DIV é menor do que a largura da IMG, a IMG está ficando alinhada à esquerda, cortando partes da imagem somente no seu lado direito.

Estou fazendo os testes em um desktop com resolução de 1920x1080 e a imagem que estou usando na IMG tem 1680x945px.
Seguem os códigos HTML e CSS:
 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype html> <html lang="pt-br"> <head>     <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head>   <body>     <div id="main">         <div id="viewport_left" class="viewports">         </div>         <div id="viewport_center" class="viewports">             <img id="imagem_teste" src="imagem_teste_01.jpg">         </div>         <div id="viewport_right">         </div>     </div>     <div id="footer">     </div> </body> </html>  
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 * {     margin: 0;     padding: 0;     text-align: center;     overflow: hidden; } #main {     width: 100%;     margin: 0; } #viewport_left {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     left: 0;     top: 0; } #viewport_center {     min-height: calc(100vh - 25px);     width: calc(100vw - 650px);     margin-bottom: 25px;     border-left: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     background-color: red;     position: absolute;     left: 50%;     top: 50%;         margin-left: calc(((100vw - 648px) / 2)* -1);         margin-top: calc((100vh / 2)* -1);     display: table;     overflow: hidden; } #imagem_teste {     max-height: calc(100vh - 25px);     position: absolute;     width: auto;     height: auto; } #viewport_right {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     right: 0;     top: 0; } #footer {     position: fixed;     bottom: 0;     left: 0;     height: 24px;     width: 100%;     background-color: #333333;     border-top: 1px solid #FFFFFF;     text-align: center;     font-family: Verdana, Geneva, sans-serif;     font-size: 12px;     color: #FFFFFF; }
Alguém sabe como posso corrigir este problema?
Desde já agradeço a toda e qualquer ajuda e colaboração.

Grato, Evair Peterson.

Olá, estou desenvolvendo um site onde não posso editar o HTML dos menus, então estou trabalhando de uma forma mais "gambiarra". O Menu possui botões que são palavras "únicas" e outros botões onde há "duas linhas de palavras".
 
Porém não consigo centralizar verticalmente os dois. Assim, por exemplo ------=====-------

HTML (Não posso alterar nada, apenas acrescentar mais botões)
<nav class="menu_component" id="component_37548"> <menu class="dropdown"> <li id="menu_item_39037" class="sub"> <a alt="O SIENPRO" title="" target="" class="empty-href"> O SIENPRO </a> <menu class="submenu"> <li id="menu_item_41614" class=""> <a alt="SOBRE" title="" target="" class="" href="/p/21374-sobre-o-sienpro"> SOBRE </a> </li> <li id="menu_item_39038" class=""> <a alt="COMIT&Ecirc;" title="" target="" class="" href="/p/23834-comite-2018"> COMIT&Ecirc; </a> </li> </menu> </li> <li id="menu_item_41615" class=""> <a alt="TEMA" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#tema"> TEMA </a> </li> <li id="menu_item_41616" class=""> <a alt="PRINCIPAIS DATAS" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#datas"> PRINCIPAIS DATAS </a> </li> <li id="menu_item_39040" class="sub"> <a alt="EDI&Ccedil;&Otilde;ES SIENPRO" title="" target="" class="empty-href"> EDI&Ccedil;&Otilde;ES SIENPRO </a> <menu class="submenu"> <li id="menu_item_41593" class=""> <a alt="I SIENPRO - 2017" title="" target="" class="" href="/p/23811-i-sienpro-2017"> I SIENPRO - 2017 </a> </li> <li id="menu_item_41605" class=""> <a alt="II SIENPRO - 2018" title="" target="" class="" href="/p/23814-ii-sienpro-2018"> II SIENPRO - 2018 </a> </li> </menu> </li> <li id="menu_item_39041" class=""> <a alt="CONTATO" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#contato"> CONTATO </a> </li> <li id="menu_item_41617" class="sub"> <a alt="ARTIGOS" title="" target="" class="empty-href"> ARTIGOS </a> <menu class="submenu"> <li id="menu_item_41618" class=""> <a alt="REGRAS PARA SUBMISS&Atilde;O" title="" target="" class="empty-href"> REGRAS PARA SUBMISS&Atilde;O </a> </li> <li id="menu_item_41619" class="">  
 
CSS:
.menu_component *{ margin: 0; padding: 0; } .menu_component .dropdown{ width: 100%; height: 67px; background-color: #222; } .dropdown li{ list-style: none; position: relative; float: left; width: 150px; text-align: center; } .dropdown li li{ float: none; width: 200px; text-align: left; } .dropdown li a{ padding: 15px !important; display: block; text-decoration: none; background-color: #222; font-size: 18px; color: #fff; height: 37px; } .dropdown .submenu { position: absolute; z-index: 1000; display: none; } .dropdown li:hover .submenu{ display: block; } .dropdown a:hover{ background-color: #f0f0f0; color: #000; } Link do site: https://sienpro.catalao.ufg.br/
 
Menu como está:

 
 
Como eu gostaria que ficasse:

Aprenda a centralizar qualquer elemento.
 
Tutorial Como Centrar Vertical e Horizontal com CSS
Neste vídeo vamos aprender como podemos centrar qualquer elemento na horizontal e vertical usando somente CSS. 
♦ Exemplo também para sites responsivos com bootstrap 3.