Абсолютный центр с jQuery и css

Question

Я искал повсюду, и это казалось лучшим, что я мог найти. Я пытаюсь абсолютным центром div с h2 и p тегами внутри.

JS

$(function() { 
    $('.center').css({ 
    'position': 'absolute', 
    'left': '50%', 
    'top': '50%', 
    'margin-left': function() { 
     return -$(this).outerWidth()/2 
    }, 
    'margin-top': function() { 
     return -$(this).outerHeight()/2 
    } 
    }); 
}); 

HTML

<div class="center"> 
    <h2 class="special">My Title</h2> 
</div> 

У меня есть h2 элемент на моей странице в пределах div с классом center. Я попытался сделать свойства CSS h2width: 100%; text-align: center;, чтобы попытаться вернуть его в середину. Это всегда больше справа, чем левое, и это довольно раздражает.

Я пробовал со многими шрифтами, чтобы убедиться, что это не тот шрифт, который я использую, не вникает в что-то, но все же одинаковые результаты. Любая помощь предоставляется.

Answer 1

Pure CSS будет так. ..

.center { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
h2 { 
 
    margin: 0; 
 
}

<div class="center"> 
 
    <h2 class="special">My Title</h2> 
 
</div>

Answer 2

В таком случае вы должны предоставить некоторые DEMO, но вы можете делать то, что вы хотите, только с помощью CSS, как это:

.center { 
    -webkit-transform: translateX(-50%); // Chrome, Opera 15+,Safari 
    -ms-transform: translateX(-50%); // IE 9 
    transform: translateX(-50%); // Firefox 16+, IE 10+, Opera 
    left:50%; 
    position: absolute; 
} 

Это должно решить вашу проблему

Answer 3

.boxUnKnow 
 
{ 
 
    
 

 
    width:50%; 
 
    height:50%; 
 
    background:red; 
 
    position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
    transform:translate(-50%,-50%); 
 
    text-align:center; 
 

 
} 
 
h4 
 
{ 
 

 
position: relative; 
 
top: 50%; 
 
transform: translateY(-50%); 
 
padding: 0; 
 
margin: 0; 
 

 
}

<div class="boxUnKnow"><h4>Box centered</h4></div>

является этот результат, который вы хотите/ожидать?