css 元素水平居中 |html css js 自动加版本号

以下是一个简单的示例，展示如何使用 CSS 元素水平居中：

“`html

<div class=”container”>

<h1 class=”center”>水平居中</h1>

<p class=”center”>垂直居中</p>

</div>

“`css

.container {

width: 300px;

height: 200px;

text-align: center;

h1.center {

display: block;

margin-bottom: 10px;

p.center {

display: block;

margin-bottom: 20px;

在上面的示例中，`.container` 元素具有 300 像素的宽度和 200 像素的高度，并且使用 `text-align: center` 属性将元素水平居中。`h1.center` 和 `p.center` 元素分别使用了 `display: block` 将子元素转换为块元素，并设置适当的内边距和bottom 内边距，以实现水平居中效果。

除了使用 CSS 元素水平居中，还有其他一些方法来实现水平居中，比如使用绝对定位、transform 等。这些方法可以根据具体的需求来选择。

通过使用 CSS 元素水平居中，可以快速和有效地将静态元素水平居中，为网页布局提供更多的灵活性和实用性。