如何将任何 html 内容置于浏览器的中央？

Question

我对许多 html 代码概念都不熟悉，对 html 内容居中有疑问。

关于 html 代码，将任何内容置于网络浏览器中心的最佳方式是什么？

我特别需要在 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

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

试试下面的代码

<!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 内容置于浏览器的中央？

How can I center any html content in the center of a browser?

html

browser

center