Question

我是许多HTML代码概念的新手，并且对于集中html内容存在疑问。

关于html代码，如何将任何内容集中在Web浏览器的中心？

我特别需要在C＃webBrowser控件中执行此操作，并且想知道是否需要在我的html代码中添加一些样式，添加一些属性，添加特定容器或是否有其他方法。

我需要水平和垂直居中。

感谢。

Answer 1

水平居中：

    left: 50%;
    transform: translateX(-50%);

的工作原理。垂直居中：

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

Answer 2

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin: auto; 
    background-color: #ddd;
    width: 30%/*whatever width you want*/;
}

<body>
  <div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

<p>My Inner Content</p>

</div>
</div>
</div>
</body>

试试这个

Answer 3

您必须为您的conatiner指定固定高度并添加与line-height相同的高度，然后将您的内容添加到另一个容器并将其放在主容器中。

尝试以下代码

<!DOCTYPE html>
<html>
<style>
.content{
    text-align: center; 
    height:800px;
    line-height: 800px;
}
.inner-content {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}
</style>
<body>
    <div class="content"><span class="inner-content">test content<br>test content<br>test content<br>test content<br>test content<br>test content<br>test content<br>test content<br>test content<br>test content<br></span></div>
</body>
</html>

Answer 4

请尝试这个：

的CSS：

.first {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.Second {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.third {
    margin: auto; 
    background-color: #cb1c69;
    width: 100%/*whatever width you want*/;
}
.center
{
    text-align:center;
    color:white;
}
.cen
{
    text-align:center;
    color:white;
}

DEMO

如何将任何html内容集中在浏览器的中心？

4 个答案: