如何使边框居中答案

【问题标题】：How to center a border如何使边框居中
【发布时间】：2014-08-25 20:41:29
【问题描述】：

我对 CSS 还很陌生。我一直在寻找有关居中 div 的答案。我确实看过这个网站的一些答案，但它对我没有多大帮助。我想要一个完美的中锋。谢谢！

这是我的图片：

<!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>

【问题讨论】：

正确居中：jsfiddle.net/6mhp49r3
缺少什么让您的问题成为“不完美的答案”？
你想让它水平和垂直居中吗？如果是这样结帐：css-tricks.com/centering-in-the-unknown
什么是“完美中心”？

标签： html css border center margins

【解决方案1】：

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

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

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

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*/
}

【讨论】：

【解决方案2】：

只需在您的div{} 末尾添加，它就会完美居中：

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

【讨论】：