Question

我对CSS很新。我一直在寻找关于居中的答案。我确实在这个网站上找到了一些答案，但它对我没什么帮助。我想拥有一个完美的中心。谢谢！

这是我的形象：

[IMG]http://i58.tinypic.com/2na1k6u.jpg[/IMG]

<!DOCTYPE html>
<html>
<head>
<style>

@font-face {
    font-family: stonehen; src: url('stonehen.ttf'); }



    @font-face {
        font-family: stonehen src: url('stonehen.ttf'); 
        font-weight: bold; }
div {    
        border: 4px solid #A9A9A9;
        margin: auto;
        color: #A9A9A9;
        text-align: center;
        background: #006400;
        border-radius: 25px;
        padding: 6px;
        font-family: stonehen, san-serif;
        font-size: 150%;
        font-weight: bold;
        width: 300px; }

    </style>
    </head>
    <body>

    <div> Welcome </div>

    </body>
    </html>

Answer 1

如果你想只水平居中......

div {
  display:block;
  margin: 0 auto;
}

如果你想让它水平和垂直居中，你需要一个固定的高度和宽度来定位它。将绝对定位设置在x轴的中间位置，并沿y轴设置一半。然后＆＃34;轻推＆＃34;它的负边距是宽度的一半，高度的一半。

div {
  display:block;
  position:absolute;
  width: 300px;
  height:100px;
  top 50%;
  left:50%;
  margin-top:-50px; /*half of element height*/
  margin-left-150px; /*half of element width*/
}

Answer 2

只需添加到div{}的末尾，它就会完全居中：

height: 25px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

如何居中边界

2 个答案: