ASP.NET + CSS - Как расположить элементы по центру веб-страницы по вертикали и горизонтали?

Question

Моя веб-форма довольно проста. Он должен иметь три строки текстовых элементов / ASP.NET. Главная страница имеет верхний и нижний колонтитулы. Мне нужно отцентрировать эти три строки в середине страницы по вертикали и горизонтали, особенно если меняется нижняя часть. Как мне сделать это с помощью CSS?

Answer 1

На вашей главной странице вам понадобится контейнер и центрируйте его, затем вам понадобится div для основного контента. необработанный код будет выглядеть примерно так:

<div id="center">
   <div id="main">
      <p>This text is perfectly vertically and horizontally centered.</p>
   </div><!-- end #main -->
</div><!-- end #center -->

<style>
   #center { position: absolute; top: 50%; width: 100%; height: 1px; overflow: visible }
   #main { position: absolute; left: 50%; width: 720px; margin-left: -360px; height: 540px; top: -270px } 
</style>

Это тот же подход, который предлагает Дэмиен. Как правило, это единственный способ достичь только с помощью CSS. Вероятно, вы можете лучше решить эту проблему с помощью JavaScript / jQuery.

Answer 2

Горизонтальное выравнивание вещей просто.Если элемент имеет фиксированное значение, присвойте ему следующее css:

.element
{
      margin: 0 auto;
}

Это говорит о том, что элемент имеет нулевой верхний и нижний отступы и автоматически вычисляет поля слева и справа.

Существует способ вертикально центрировать элементы, который называется Мертвая точка .Он использует смещение в 50% от верхней части страницы и отрицательное поле для перемещения контента в центр (по вертикали).Недостатком является то, что вашему элементу необходим фиксированный размер (высота и ширина).

Answer 3

Вот что у меня сработало:

<style type="text/css">
  .auto-style1 {text-align:center;}
</style>