Html 如何使边界居中_Html_Css_Border_Center_Margins

Html 如何使边界居中

html css

Html 如何使边界居中,html,css,border,center,margins,Html,Css,Border,Center,Margins,我对CSS相当陌生。我一直在寻找关于以div为中心的答案。我确实在这个网站上找到了一些答案，但它对我帮助不大。我想要一个完美的中锋。谢谢大家! 这是我的形象： <!DOCTYPE html> <html> <head> <style> @font-face { font-family: stonehen; src: url('stonehen.ttf'); } @font-face { font-family

我对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>


@字体{
字体系列：stonehen；src:url（'stonehen.ttf'）；}
@字体{
字体系列：stonehen src:url（'stonehen.ttf'）；
字体大小：粗体；}
div{
边框：4px实心#A9A9；
保证金：自动；
颜色：#A9A9；
文本对齐：居中；
背景#006400；
边界半径：25px；
填充：6px；
字体系列：stonehen，san serif；
字体大小：150%；
字体大小：粗体；
宽度：300px；}
欢迎

只需在

div{}

的末尾添加，它将完全居中：

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

如果你只想水平居中

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

它正确地居中：缺少了什么使它成为你问题的“不完美答案”？你想让它水平居中还是垂直居中？如果是，结帐：什么是“完美中心”？