Html CSS 居中文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15089556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 05:54:18 来源:igfitidea点击:
CSS Center a Text Box
提问by user1249957
Here is the registration box:
这是注册框：
http://technicaldebt.co.uk/fyp/register.php
http://technicaldebt.co.uk/fyp/register.php
I am trying to get the box to center in the middle of the webpage. The CSS is attached below. Any help would be greatly appreciated.
我试图让框居中在网页的中间。CSS 附在下面。任何帮助将不胜感激。
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
background: #1e1e1e url(images/bg04.jpg) repeat;
font-family: 'Open Sans', sans-serif;
font-size: 11pt;
color: #7f7f7f;
}
form
{
}
form input,
form select,
form textarea
{
-webkit-appearance: none;
}
br.clear
{
clear: both;
}
p, ul, ol, dl, table
{
margin-bottom: 1em;
}
p
{
line-height: 1.7em;
}
a
{
color: #779c5b;
}
a:hover
{
text-decoration: none;
}
section,
article
{
margin-bottom: 3em;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.image
{
display: inline-block;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
}
.image-left
{
float: left;
margin: 0 2em 0 1em;
}
.image-border img
{
border-radius: 5px;
}
ul.style1
{
}
ul.style1 li
{
padding: 0.80em 0 0.75em 0;
border-top: 1px solid #e0e0e0;
}
ul.style1 a
{
text-decoration: underline;
color: #779c5b;
}
ul.style1 a:hover
{
text-decoration: none;
}
ul.style1 .image-left
{
margin-top: 0.50em;
margin-right: 1.50em;
margin-left: 0 !important;
}
ul.style1 .date
{
display: block;
margin: 0;
padding: 1em 0 0 0;
line-height: 0;
color: #047ab7;
}
ul.style1 .first
{
border-top: none;
}
ul.style2
{
}
ul.style2 li
{
overflow: hidden;
padding: 1.75em 0 1.75em 0;
border-top: 1px solid #e0e0e0;
}
ul.style2 p
{
margin: 0;
}
ul.style2 h3 {
padding: 0 0 0.50em 0;
font-size: 1.00em;
}
ul.style2 .image-left
{
margin-left: 0;
}
ul.style2 .first
{
border-top: none;
}
ol.style1
{
margin-left: 3em;
}
ol.style1 li
{
padding: 0.35em 0;
list-style: decimal;
}
.button
{
display: inline-block;
margin-top: 1em;
padding: 0.70em 1.5em;
border-radius: 5px;
background: #779c5b;
line-height: 1;
text-align: center;
text-decoration: none;
color: #FFFFFF;
transition: background-color .25s ease-in-out;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
}
.button:hover
{
background: #96b77c;
}
.button-style1
{
background: #222222;
}
.button-style1:hover
{
background: #2d2d2d;
}
.button-style2
{
margin-top: 0.50em;
padding: 1.75em 3.00em;
box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.4), 0 6px 5px -5px rgba(0, 0, 0, 0.4), -5px 0 5px -5px rgba(0, 0, 0, 0.4);
line-height: 0.25em;
}
.button-style2:hover
{
background: #96b77c;
}
/* Assign these to ARTICLE tags */
.box
{
padding: 2.50em 2.50em;
background: #FFFFFF;
border: 1px solid #e0e0e0;
border-radius: 5px;
}
.box h2
{
padding: 0 0 0.40em 0;
letter-spacing: -0.03em;
font-size: 1.60em;
color: #0f0f0f;
}
.box .subtitle
{
padding: 0 0 0.30em 0;
font-size: 1.10em;
color: #5f6b8b;
}
.box-post
{
}
.box-featured-post
{
}
/* Assign these to SECTION tags */
.box-news
{
}
.box-tweets
{
}
.box-contact
{
}
/*********************************************************************************/
/* Wrappers */
/*********************************************************************************/
#wrapper
{
overflow: hidden;
background: url(images/bg01.jpg) repeat;
}
#wrapper-gradient
{
}
#header-wrapper
{
overflow: hidden;
background: url(images/gradient.svg);
background: -moz-linear-gradient(
center bottom,
rgba(0,0,0,0) 5%,
rgba(0,0,0,0.5) 100%
);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.0, rgba(0,0,0,0.0)),
color-stop(1.0, rgba(0,0,0,0.5))
);
}
#banner-wrapper
{
overflow: hidden;
}
#feature-wrapper
{
overflow: hidden;
padding: 3em 0em;
background: #5f6b8b url(images/shadow02.png) no-repeat center top;
box-shadow: 0px 10px 5px rgba(0,0,0,.3), 0px -1px 25px rgba(0,0,0,.3);
color: #dfe2e8;
}
#main-wrapper
{
overflow: hidden;
padding: 3em 0em 4em 0em;
background: #f3f3f3 url(images/bg03.jpg) repeat;
box-shadow: 0px 10px 5px rgba(0,0,0,.3), 0px -1px 25px rgba(0,0,0,.3);
}
#footer-wrapper
{
}
#copyright-wrapper
{
background: url(images/gradient.svg);
background:
-moz-linear-gradient(
center bottom,
rgba(0,0,0,0) 5%,
rgba(0,0,0,0.5) 70%
);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.0, rgba(0,0,0,0.0)),
color-stop(0.70, rgba(0,0,0,0.5))
);
}
/*********************************************************************************/
/* Feature */
/*********************************************************************************/
#feature-content
{
}
#feature-content h2
{
height: 3.50em;
margin: 0 0 1em 0;
padding: 0 0 0 3.50em;
background: url(images/arrow01.png) no-repeat 0.75em 50%;
border-bottom: 1px solid #949db3;
letter-spacing: -0.02em;
font-size: 1.50em;
color: #FFFFFF;
}
#feature-content span
{
display: inline-block;
height: 3.50em;
padding: 0 0 0 1em;
border-left: 1px solid #949db3;
line-height: 3.5em;
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
overflow: hidden;
}
#banner h2
{
display: inline-block;
font-weight: 700;
color: #FFFFFF;
}
#banner .subtitle
{
font-weight: 300;
color: #ababab;
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
#content
{
}
#content article
{
}
#content .image-left
{
margin-left: 0;
}
/*********************************************************************************/
/* Sidebar */
/*********************************************************************************/
#sidebar
{
}
/*********************************************************************************/
/* Two Column */
/*********************************************************************************/
#two-column
{
}
#two-column .tbox
{
}
#two-column .tbox .image-full
{
padding-bottom: 2em;
}
/*
Registration/Login Form by html-form-guide.com
You can customize all the aspects of the form in this style sheet
*/
#fg_membersite fieldset
{
width: 230px;
padding:20px;
border:1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
采纳答案by Lucas Lazaro
To center a div with margin: 0 auto;like suggested the div must contain a valid width.
要将 div 与margin: 0 auto;建议的 div居中，该 div 必须包含有效的宽度。
If you add
如果添加
#register{
//...
width: 300px;
margin: 0 auto;
}
This will center your div in the center horizontally. You can also use text-align: centerin the parent with display: inline-blockin the form div. Such as:
这将使您的 div 水平居中。您也可以text-align: center在父display: inline-block表单中使用 div。如：
#fg_membersite{
text-align:center;
}
#register{
display:inline-block;
}
If you want to center it also in the vertical i suggest you use display:table(on the aprent div) and display:table-cell(in a wrapper div) and vertical-align:middleoptions , or maybe a position:absolutewith negative margins, it's your choice.
如果您想将它也垂直居中，我建议您使用display:table（在 aprent div 上）和display:table-cell（在包装 div 中）和vertical-align:middleoptions ，或者可能是position:absolute负边距，这是您的选择。
Cheers.
干杯。
回答by Kami
Try adding the following css
尝试添加以下css
#register
{
margin:0px auto;
}
This will center the formcontainer.
这将使form容器居中。
回答by Archer
in your body tag, you can include
在你的身体标签中，你可以包括
margin: 0 auto;
边距：0 自动；
回答by Barna Tekse
Try this:
尝试这个：
#fg_membersite fieldset {
left: 50%;
top: 50%;
width: 230px;
margin-top: -125px: /* height/2 */
margin-left: -115px; /* width/2 */
position: absolute;
}
