Question

我有三角形，我想要居中

Answer 1

如果没有适用于所有屏幕尺寸的表格，有两种方法可以做到这一点。第一种方式，我建议（因为它不使用绝对位置）：

body {
text-align:center;
}

#div1 {
width: your width;
margin:auto;
}

...和div2相同。第二种方式使用绝对定位，你需要知道你的div的宽度（必须修复）。在你的例子中它是200像素，所以相应地：

#div1 {
position: absolute;
left:50%;
margin-left:-100px; /* half of your width */
}

这里没有为body添加任何内容。

Answer 2

您可以使用margin:0 auto;居中，但请注意，需要指定宽度才能生效。（通常是图像的情况）。此外，这只是水平居中，而不是垂直居中。

此外，您可以使用绝对位置居中，代码如下所示：

centeredelement{
   position:absolute;
   top:50%;
   left:50%;
   height:<your-height>;
   width:<your-width>;
   margin-left: -<your-width>/2;
   margin-top:  -<your-height>/2;
}

请注意：除非您使用的是html5，而且它是根据doctype

<!DOCTYPE html>

以数字开头的ids无效（你的jsfiddle）！

Answer 3

首先，CSS ID无法以数字开头，因此您的ID CSS属性未被提取。其次，您已经有宽度到工作宽度，因此您不需要将图像绝对放在中心位置。您所要做的就是提供0 auto的余量以自动居中，如下所示：

#a, #b{
    margin:0 auto;
    width:200px;
}

Demo

以三角形为中心

3 个答案: