Html 如何在不考虑屏幕大小的情况下将正文置于页面中心_Html_Css

Html 如何在不考虑屏幕大小的情况下将正文置于页面中心

html css

Html 如何在不考虑屏幕大小的情况下将正文置于页面中心,html,css,Html,Css,如何确保我的内容始终位于页面的中心？我将最小和最大宽度和高度设置为固定的像素数，并将主体放在左边距处：32%。但当我更改浏览器大小时，主体会偏离中心。是否有其他方法确保所有东西都保持在中心位置？尝试使用以下方法： margin:0 auto; 不要将body标签的左边距设置为一个百分比，它只会是特定屏幕大小的中心。而是在css文件集中： body{margin:0 auto;} 请注意，您应该仅在内容的实际容器上使用边距：0 auto。通常它的用法如下： body{ background:

如何确保我的内容始终位于页面的中心？我将最小和最大宽度和高度设置为固定的像素数，并将主体放在左边距处：32%。但当我更改浏览器大小时，主体会偏离中心。是否有其他方法确保所有东西都保持在中心位置？

尝试使用以下方法：

margin:0 auto;

不要将body标签的左边距设置为一个百分比，它只会是特定屏幕大小的中心。而是在css文件集中：

body{margin:0 auto;}

请注意，您应该仅在内容的实际容器上使用边距：0 auto。通常它的用法如下：

body{
background: red;
}

.container{
background: green;
margin: 0 auto;
width: 960px;
overflow: auto;
}

因此，正文中的html如下所示

<body>
<div class="container">
    ****your content****
</div>
</body>


****你的内容****

在包装上应用margin:0 auto是最常见的元素居中方式。为了确保您的内容始终位于屏幕的中心，请将其包装在容器div中，并指定一个宽度（RWD百分比是最有用的）。有了margin:0auto，你几乎不会出错，但还有另一种方法也很有效

您可以使用位置：相对；和css3的翻译中心的内容。如果使用百分比进行定位和平移，则永远不会出错

基本代码：

<body>
  <div id="wrapper">
    The content
  </div>
</body>

+translateX（）是用于

 transform: translateX();

我用一个例子做了一支笔：

祝你好运

 transform: translateX();