关于css：如何将与页面的中间(水平/宽度)对齐

How to align a

to the middle (horizontally/width) of the page

本问题已经有最佳答案，请猛点这里访问。

我有一个div标签，width设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但它应该将它带到页面的中间。

1
2
3
4
5

<body>

centered content

</body>

position: absolute然后top:50%和left:50%将顶边放在屏幕的垂直中心，左边放在水平中心，然后将margin-top添加到div高度的负值，即，-100将其高于100，同样margin-left。这使div完全位于页面的中心。

1
2
3
4
5
6
7
8
9
10

#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}

相关讨论

现代Flexbox解决方案是进入/退出2015年的方式。justify-content: center用于父元素，以将内容与其中心对齐。

HTML

Center

CSS

1
2
3
4
5
6
7

.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}

产量

1
2
3
4
5
6
7
8
9
10
11

.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}

1	Centered div with left aligned text.

你的意思是你想要垂直或水平居中吗？你说你指定height到800像素，并希望当width大于那时，div不会伸展...

要水平居中，可以使用CSS中的margin: auto;属性。此外，您必须确保body和html元素没有任何边距或填充：

1 2	html, body { margin: 0; padding: 0; } #centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

要使它在Internet Explorer 6中也能正常工作，您必须按如下方式执行此操作：

HTML

1
2
3
4
5

<body>

centered content

</body>

CSS

1
2
3
4
5
6
7
8
9
10
11

body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}

.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}

相关讨论

1
2
3
4
5

div {
display: table;
margin-right: auto;
margin-left: auto;
}

相关讨论

您也可以像这样使用它：

1	Your contents here...

相关讨论

只需在body标记之后使用center标记，然后在body结束之前结束center标记：

1
2
3
4
5

这适用于我尝试过的所有浏览器。

相关讨论

这可以通过柔性容器轻松实现。

1
2
3
4
5
6
7
8
9
10

.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}

.item{
align-self: center;
}

预览链接

将此类添加到要居中的div(应具有设置的宽度)：

1
2
3
4
5

.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}

或者，将余量添加到div类中，如下所示：

1
2
3
4
5
6

.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}

相关讨论

Div在父级内部垂直和水平居中，而不固定内容大小

在这个页面上有一个很好的概述，有几个解决方案，在这里分享太多的代码，但它显示了可能的...

就个人而言，我喜欢这个解决方案，着名的变换翻译-50％技巧最多。它适用于元素的固定(％或px)和未定义的高度和宽度。
代码很简单：

HTML：

CSS：

1
2
3
4
5
6
7
8
9
10
11
12

.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */

/* optional size in px or %: */
width: 100px;
height: 100px;
}

这里有一个小提琴，表明它有效

相关讨论

使用CSS flex属性：http：//jsfiddle.net/cytr/j7SEa/6/show/

1
2
3
4
5

body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}

相关讨论

旧代码中的一些其他预先存在的设置将阻止div页面居中L＆R：

隐藏在外部样式表链接中的其他类。

嵌入在img之类的其他类(如旧的外部CSS打印格式控件)。

带有ID和/或CLASSES的图例代码将与命名的div类冲突。

居中而不指定div宽度：

1
2
3
4
5
6
7
8
9
10
11

body {
text-align: center;
}

body * {
text-align: initial;
}

body div {
display: inline-block;
}

这类似于

标签，但是：

的所有直接内联子元素(例如)也将定位到中心
根据浏览器默认值，内联块元素可以具有不同的大小(comapred到display:block设置)

使用justify-content和align-items水平和垂直对齐div

https://developer.mozilla.org/de/docs/Web/CSS/justify-content
https://developer.mozilla.org/en/docs/Web/CSS/align-items

1
2
3
4
5
6
7
8
9
10
11
12
13
14

html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}

1	h & v aligned

如果您有一些常规内容，而不仅仅是一行文字，我知道的唯一可能原因是计算保证金。

这是一个例子：

HTML

1
2
3
4

first

second
third

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

body {
margin: 0;
padding: 0;
}

.common {
border: 1px solid black;
}

#supercontainer {
width: 1200px;
background: aqua;
float: left;
}

#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}

#container {
float: left;
}

#first {
background: red;
height: 102px;
width: 50px;
float: left;
}

#second {
background: green;
height: 50px;
width: 50px;
}

#third {
background: yellow;
height: 50px;
width: 50px;
}

因此，#supercontainer是您的"whole page"，其width是1200px。

#middlecontainer div，包含您网站的内容;它是width 102px。如果已知width内容，则需要将页面大小除以2，并从结果中减去内容width的一半：
1200/2 - (102/2)= 549;

是的，我也看到这是CSS的格罗斯失败。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}

http://jsfiddle.net/NPV2E/

"body"标签的"width：100％"仅用于示例。在实际项目中，您可以删除此属性。

相关讨论

简单的http://jsfiddle.net/8pd4qx5r/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

html {
display: table;
height: 100%;
width: 100%;
}

body {
display: table-cell;
vertical-align: middle;
}

.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}

使用以下代码将div框居中：

1
2
3
4
5
6
7
8
9
10
11

.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}

这也适用于InternetExplorer，但自动边距不起作用。

1
2
3
4
5
6
7

.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13

<parent>
<child>
</child>
</parent>

parent {
position: relative
}
child {
position: absolute,
left: 50%,
transform: translateX(-50%)
}

1
2
3
4
5

<body>

In center

</body>

如果要更改垂直位置，请更改值250，您可以根据需要排列内容。无需给出宽度和其他参数。

如果您的中心内容深入其他div，那么只有保证金可以节省您的费用。没有其他的。我总是在不使用像Bootstrap这样的框架时面对它。

就我而言，手机屏幕尺寸未知，这就是我的所作所为。

HTML

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}

JavaScript(在您需要显示此DIV之前)

1
2
3

$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();

1
2
3
4

.middle {
margin:0 auto;
text-align: center;
}

/ *它将div带到中心* /

相关讨论

出于某种原因，以前的答案都没有对我有用。这对我有用，它也可以在浏览器中使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.center {
text-align: center;
height: 100%;

/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;

/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;

/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}

获取屏幕的宽度。
然后留出25％的保证金
保证金正确25％

通过这种方式，容器的内容将位于中间。

示例：假设容器宽度= 800px;

1
2
3
4
5
6
7
8
9
10
11
12
13

<p id='myContent'>
</p>
<contents></contents>
<contents></contents>

if ($("#myContent").parent === $("updatedContent"))
{
$("#myContent").css({
'left': '-(device-width/0.25)px';
'right': '-(device-width/0.225)px';
});
}

码农家园

关于css：如何将
与页面的中间(水平/宽度)对齐

How to align a

to the middle (horizontally/width) of the page

How to align a to the middle (horizontally/width) of the page

How to align a

to the middle (horizontally/width) of the page