как сделать содержимое css как коробки, текст как центр?

Question

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

body { 
background:#E9E9E9; 


} 

#formWrap { 
width:720px; 
margin-top:30px; 
margin-left:30px; 
margin-right:30px; 
background:#FFF; 

border:1px solid #F1F1F1; 
-moz-border-radius:20px; 
-moz-box-shadow:2px 2px 5px #999; 
-webkit-border-radius:20px; 
-webkit-box-shadow:2px 2px 5px #999; 
padding:16px 10px 40px; 
} 

#formWrap #form { 
border-top: 1px solid #EEE; 
width: auto; 
} 
#formWrap #form .row { 
border-bottom: 1px dotted #EEE; 
display: block; 
line-height: 38px; 
overflow: auto; 
padding: 24px 0px; 
width: 100%; 
} 
#formWrap #form .row .label { 
font-size: 16px; 
font-weight: bold; 
font-family: Arial, Helvetica, sans-serif; 
width: 180px; 
padding-right: 10px; 
margin-right: 10px; 
} 
#formWrap #form .row .input { 
float: left; 
margin-right: 10px; 
font-style: italic; 
width: auto; 
} 

.detail{ 
width: 260px; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 20px; 
padding: 7px 8px; 
margin: 0; 
} 

.mess { 
width: 450px; 
height: 250px; 
max-width: 450px; 
overflow: auto; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 20px; 
padding: 7px 8px; 
line-height: 1em; 
margin: 0; 
} 

#formWrap #form .row .context { 
color: #999; 
font-size: 11px; 
font-style: italic; 
font-family: Arial, Helvetica, sans-serif; 
width: 200px; 
float: left; 
} 


#formWrap #form .submit { 
font-family: Arial, Helvetica, sans-serif; 
margin-top: 25px; 

color: #000; 
font-size: 16px; 
text-shadow: 1px 1px 1px #999; 

} 

Answer 1

Учитывая, что #formwrap главный контейнер (белый один и наружный), просто сделать -

#formwrap{ 
    margin:0 auto; 
} 

Answer 2

вы можете использовать эту строку на элемент, который вы хотите центра:

#formWrap { 
    margin: 0 auto; 
} 

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

#formWrap { 
    margin: 0 auto 0 auto; 
} 

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

#formWrap { 
    margin: 0; 
} 

Тогда все четыре стороны получат это значение.

Но вернемся к вашему вопросу ... Вы также должны убедиться, что элемент, который обертывает этот элемент, который вы хотите центрировать, - это полная ширина того, что вы хотите от центра. Если нет, это ничего не сделает. Поскольку он будет центрировать против его родительского элемента, а не, например, с экрана.