Html 在CSS3中，如何在文本位置固定的情况下使框变大？

如何在CSS3中使长方体（边框半径）变大？如果我设置了

height

属性，例如

height:10%

，它不会改变，但是

width:10%

会使框的宽度变宽。我不知道为什么会出现这样的不一致。此外，当我将高度调整为

height:100px

时，框大小会改变，但文本大小保持不变，尽管写入

垂直对齐：中间

。那么，如何正确地使框大小更大，但是文本位置位于框的中间？

另外，当鼠标悬停在长方体上时，为什么长方体的位置会移动而不是移动

我写了JSFIDLE

，如果您想使用svg，可以阅读这篇文章

框的位置因

填充而改变：0px

.dropdown:hover .dropdown-menu {
    display: block;
    padding: 0px;/* remove this*/
    margin: 0px;
}

引导程序添加在左侧，而不是css中

正确的链接如下所示

在外部资源下
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.css

演示：

对于文本的位置，可以使用

class=text-center 

及

或

取决于你想要达到的目标

演示：
它不采用百分比高度，因为此分区大小取决于“整页”的高度。将车身更改为100%高度，它将工作

html, body {
    height: 100%;
}
div {
    height: 10%;
}

您不能隐藏该div，只能使其透明

div{
background:transparent;
}

谢谢你的澄清。还有一个问题。。。当我将鼠标悬停在下拉菜单上时，下拉菜单（
B
和
C
在本例中）看起来不太好，因为它放在嵌入式框上，我不想显示多余的背景空间（换句话说，我想显示与背景框一样宽的
B
和
C
）。在我的英语中很难解释它（我不是英国人），如果我不能理解我的话，很抱歉，但是改变它来适应我的需要是可行的吗？而且，我发现<代码>行高不把文本放在框的中间。它只是随意改变文本的位置。什么是
class=text center
？看起来它不是官方定义的类；李：不，这不是我想做的。。。如果将鼠标悬停在
A
上，则会出现下拉菜单（由
B
和
C
组成），对吗？然而，在
B
和
C
后面，有一个大的冗余块，块内
B
和
C
都在，对吗？我想删除该块（或使
B
和
C
与后面的块宽度相同）。。。
html, body {
    height: 100%;
}
div {
    height: 10%;
}

div{
background:transparent;
}