宽度）alignment

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

<body> <div style="width:800px; margin:0 auto;"> centered content </div> </body>

position: absolute ，然后是top:50% ， left:50%将顶部边缘置于屏幕的垂直中心，左边缘位于水平中央，然后在div的高度负值上添加margin-top ，即-100将其移位高于100，类似于margin-left 。这将获得div完全在页面的中心。

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

 <div id="outPopUp"></div>

你的意思是你想要居中alignment吗？你说你指定的height为800px，并希望div不要伸展，当width大于…
要水平居中，可以使用margin: auto; 属性在CSS中。此外，你必须确保body和html元素没有任何边距或填充：

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

为了使它在Internet Explorer 6中也能正常工作，您必须按照以下步骤操作：

HTML

 <body> <div class="centered"> centered content </div> </body>

CSS

 body { margin: 0; padding: 0; text-align: center; /* !!! */ } .centered { margin: 0 auto; text-align: left; width: 800px; }

现代的Flexbox解决scheme是从2015年开始/进入的方式。justify justify-content: center用于父元素将内容与其中心alignment。

HTML

 <div class="container"> <div class="center">Center</div> </div>

CSS

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

产量

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

 <div class="container"> <div class="center">Centered div with left aligned text.</div> </div>

 <div></div>

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

你也可以像这样使用它：

 <div style="width: 60%; margin: 0px auto;"> Your contents here... </div>

只需在body标签之后使用中心标签，并在body结束之前结束中心标签

 <body> <center> ........your code here..... </center> </body>

这对我尝试过的所有浏览器都有帮助

将这个类添加到你想居中的div（它应该有一个设置的宽度）：

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

或者，添加边缘的东西到你的div类，像这样：

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

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

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

旧版代码中的一些预先设置可以防止以页面为中心的L＆R：1）隐藏在外部样式表链接中的其他类。 2）embedded类似img的其他类（如较老的外部CSS打印格式控件）。 3）具有ID和/或CLASSES的图例代码将与命名的div类冲突。

居中不指定div宽度：

 body { text-align: center; } body * { text-align: initial; } body div { display: inline-block; }

这就像<center>标签一样，除了：

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

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

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

预览链接

 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/

“身体”标签的“宽度：100％”仅为例子。在实际项目中，您可能会删除此属性。

如果你有一些常规的内容，而不仅仅是一行文字，那么我所知道的唯一可能的原因就是计算保证金。
这里是一个例子：

HTML

 <div id="supercontainer"> <div id="middlecontainer"> <div class="common" id="first">first</div> <div id="container"> <div class="common" id="second">second</div> <div class="common" id="third">third</div> </div> </div> </div>

CSS

 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一半结果中width ：
1200 / 2-（102/2）= 549;

是的，我也看到，这是DER GROSSE失败的CSS。

使用justify-content和align-items来水平和垂直alignmentdiv

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

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

 <div class="container"> <div class="mydiv">h & v aligned</div> </div>

这也适用于IE，Auto Margins不。

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

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

看看这个例子（点击）。非常简单，也适用于灵活的高度。完美的，如果你没有固定高度的内容。

这里（点击）是一个很好的概述与其他一些解决scheme。

在这里（点击）与着名的-50％把戏灵活宽度的解决scheme的另一个例子

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

 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; }

使用下面的代码来alignmentdiv框：

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

 <div class="box-content"> </div>

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

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

 <body> <div style=" display: table; margin: 250 auto;"> In center </div> </body>

如果你想改变垂直位置，改变250的值，你可以按照你的需要安排内容。没有必要给出宽度和其他参数。

在我的情况下，手机屏幕尺寸是未知的，这是我做的。

HTML

 <div class="loadingImg"></div>

CSS

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

JS （在你需要显示这个DIV之前）

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

一个相当古老的问题，有很多答案，但由于某种原因，他们没有一个真正为我工作。这对我来说是有用的，它也适用于浏览器：

 .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; }

如何将<div>与页面的中间（水平/宽度）alignment

如何在浏览器窗口中居中HTML元素？

让孩子在溢出之外可见：隐藏的父级

Android：如何旋转中心点上的位图

可以溢出文本居中？

如何把表放在页面的中心使用CSS？

你能帮我用CSS集中一个<ul>元素吗？

CSS：中心块，但内容alignment左侧

有没有办法让EditText开始在EditText的左上angularinput？

Bootstrap 3模态垂直位置中心

如何使用CSS居中textarea？