你如何轻松地水平居中使用CSS的<div>？
我试图在页面上水平居中<div>块元素，并将其设置为最小宽度。 什么是最简单的方法来做到这一点？ 我希望<div>元素与我的页面的其余部分内联。 我会试着举个例子：
page text page text page text page text page text page text page text page text ------- | div | ------- page text page text page text page text page text page text page text page text
在一个非固定的宽度 div的情况下（即你不知道div将占用多less空间）。
#wrapper { background-color: green; /* for vizualization purposes */ text-align: center; } #yourdiv { background-color: red; /* for vizualization purposes */ display: inline-block; }
<div id="wrapper"> <div id="yourdiv">Your text</div> </div>
在大多数浏览器中这将工作：
div.centre { width: 200px; display: block; background-color: #eee; margin-left: auto; margin-right: auto; }
<div class="centre">Some Text</div>
margin: 0 auto;
正如ck所说 ，所有浏览器都不支持min-width
CSS ， HTML ：
div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv"> I am in the middle </div>
问题的标题和内容实际上是不同的，所以我会针对使用Flexbox发布两个解决scheme。
我猜Flexbox会在IE8和IE9被完全破坏的时候replace/添加到当前的标准解决scheme;）
检查flexbox的当前浏览器兼容性表
单个元素
.container { display: flex; justify-content: center; }
<div class="container"> <img src="http://placehold.it/100x100"> </div>
.center { margin-left: auto; margin-right: auto; }
最小宽度不是全局支持的，但可以使用
.divclass { min-width: 200px; }
那么你可以设置你的div
<div class="center divclass">stuff in here</div>
如果旧的浏览器不是问题，请使用HTML5 / CSS3。 如果是，则应用polyfills，然后使用HTML5 / CSS3。 我假设你的div在这里没有边距或填充，但是它们相对容易解释。 代码如下。
.centered { position: relative; left: 50%; transform: translateX(-50%); }
这是做什么的：
- 将
div相对于其容器放置; - 将
div的左边界水平放置在容器宽度的 50％处; - 水平地转换50％
div的自己的宽度 。
很容易想象这个过程确认div最终将水平居中。 作为奖励，您可以垂直居中 ，不收取额外费用：
.centered-vertically { position: relative; top: 50%; transform: translateY(-50%); }
这种方法的优点是你不必做任何违反直觉的事情，比如考虑你的div文本，把它包装在一个（通常语义上无用的）额外的容器中，或者给它一个固定的宽度，而不是总是可能的。
如果需要的话，不要忘记用于transform供应商前缀。
您应该使用position: relative和text-align: center父元素，然后在要居中的子元素上display: inline-block 。 这是一个简单的CSSdevise模式，适用于所有主stream浏览器。 下面是一个示例，或者查看CodePen示例 。
p { text-align: left; } .container { position: relative; display: block; text-align: center; } /* Style your object */ .object { padding: 10px; color: #ffffff; background-color: #556270; } .centerthis { display: inline-block; }
<div class="container"> <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p> <span class="object centerthis">Something Centered</span> <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p> </div>
你可以使用margin: 0 auto在你的CSS而不是margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto;
.center { height: 20px; background-color: blue; } .center>div { margin: auto; background-color: green; width: 200px; }
<div class="center"> <div>You text</div> </div>
如果你的<div>有position: absolute你需要使用width: 100%;
#parent { width: 100%; text-align: center; } #child { display: inline-block; }
在这里我添加适当的答案
您可以使用此代码段进行自定义。 这里我使用2个子块。这应该显示页面的中心。 您可以使用一个或多个块。
<html> <head> <style> #parent { width: 100%; border: solid 1px #aaa; text-align: center; font-size: 20px; letter-spacing: 35px; white-space: nowrap; line-height: 12px; overflow: hidden; } .child { width: 100px; height: 100px; border: solid 1px #ccc; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="mydiv" id="parent"> <div class="child"> Block 1 </div> <div class="child"> Block 2 </div> </div> </body> </html>
在你写的html文件中：
<div class="banner"> Center content </div>
你写的css文件：
.banner { display: block; margin: auto; width: 100px; height: 50px; }
为我工作。
添加这个类到你的css文件，它将完美的工作步骤：
1）先创build这个
<div class="center-role-form"> <!--your div (contrent) place here--> </div>
2）将此添加到您的CSS
.center-role-form { width: fit-content; text-align: center; margin: 1em auto; }
对这个问题的最佳答案是使用margin-auto但是使用它你必须知道你的div在px或%的width 。
CSS代码：
div{ width:30%; margin-left:auto; margin-right:auto; }
我使用div和span标签以及CSS属性，例如块，跨浏览器内联块和文本alignment中心，请参阅我的简单示例
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> .block{display:block;} .text-center{text-align:center;} .border-dashed-black{border:1px dashed black;} .inline-block{ display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .border-solid-black{border:1px solid black;} .text-left{text-align:left;} </style> </head> <body> <div class="block text-center border-dashed-black"> <span class="block text-center"> <span class="block"> <!-- The Div we want to center set any width as long as it is not more than the container--> <div class="inline-block text-left border-solid-black" style="width:450px !important;"> jjjjjk </div> </span> </span> </div> </body> </html>
使用margin-left：auto和margin-right：auto在某些情况下可能不起作用。 这是一个永远有效的解决scheme。 您可以指定所需的宽度，并将剩余宽度的左边距设置为一半。
<div style="width:80%; margin-left:calc(10%);"> your_html </div>
你可以使用position：relative; 然后设置左侧和顶部的值：
.cenverDiv{ position:relative; left:30%; top:0px; }
使用jQuery：
$(document).ready(function() { $(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6 $(".myElement_container_new").css({// for IE6 "display" : "block", "position" : "relative", "margin" : "0", "padding" : "0", "border" : "none", "background-color" : "transparent", "clear" : "both", "text-align" : "center" }); $(".myElement").css({ "display" : "block", "position" : "relative", "max-width" : "75%", // for example "margin-left" : "auto", "margin-right" : "auto", "clear" : "both", "text-align" : "left" }); });
或者，如果要将每个元素居中放在“.myElement”类中：
$(document).ready(function() { $(".myElement").each(function() { $(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6 $(".myElement_container_new").css({// for IE6 "display" : "block", "position" : "relative", "margin" : "0", "padding" : "0", "border" : "none", "background-color" : "transparent", "clear" : "both", "text-align" : "center" }); $(this).css({ "display" : "block", "position" : "relative", "max-width" : "75%", "margin-left" : "auto", "margin-right" : "auto", "clear" : "both", "text-align" : "left" }); }); });
