Как я могу центрировать следующий контент в кросс-браузере

Question

#logo {
    width: 330px ;
    margin: 0 auto;
}

header h1 {
    width: 760px;
    font-weight: 33px;
    margin: 0 auto;
}

#aboutme section {
    width: 960px;
    margin: 0 auto; 
    color: #fff;
}

section h1 {
    width: 200px;
    margin: 0 auto;
}

#portfolio section {
    width: 960px;
    margin: 0 auto;
}

contact form    {
    margin:auto;
    position:relative;
    width:550px;
    height:450px;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-style: italic;
    line-height: 24px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    border-radius: 10px;
    padding:10px;
    border: 1px solid #999;
    border: inset 1px solid #333;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

Это веб-сайт для контента www.swatdesignz.com, который в настоящее время отменен, но я бы хотел избавиться от кросс-браузерной совместимости. Я всегда хотел бы, чтобы кто-то мог направить меня в кросс-браузерную форму почты.

Answer 1

Вы можете довольно хорошо вертикально и горизонтально центрировать объект, используя абсолютное позиционирование. Единственное предостережение в том, что он должен иметь фиксированную ширину и высоту (если вы не хотите вычислять их динамически, используя javascript).

.parent { position:relative; }

.item_to_be_centred { 
position:absolute;
top:50%;
height:50%;
width:100px;
height:100px;
margin:-50px 0 0 -50px;
}

Хитрость заключается в том, что отрицательные поля составляют 50% ширины / высоты элементов, что заставляет браузер думать, что точка привязки элементов - это мертвая точка, а не верхняя левая.

Примечание: будьте осторожны при размещении ссылок на сайт в разработке в реальной среде. Вы ясно видите PHP в html как комментарии, и одна его часть представляет ваш адрес электронной почты.