如何使用CSS轻松地水平居中<div>？

小开

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

全局不支持最小宽度，但可以使用

.divclass {
min-width: 200px;
}

然后您可以将您的div设置为

<div class="center divclass">stuff in here</div>

小开

margin: 0 auto;

作为ck说，最小宽度并非所有浏览器都支持

小开

css，超文本标记语言：

div.mydiv {width: 200px; margin: 0 auto}

<div class="mydiv">
    

I am in the middle
    

</div>

您的图表还显示了一个块级元素（div通常是），而不是内联元素。

在我的脑海中，FF2+/Safari3+/IE7+支持min-width。可以使用hackety CSS或简单的JS为IE6完成。

小开

在大多数浏览器中，这将起作用：

div.centre {
width: 200px;
display: block;
background-color: #eee;
margin-left: auto;
margin-right: auto;
}

<div class="centre">Some Text</div>

In IE6 you will need to add another outer div:

div.layout {
text-align: center;
}


div.centre {
text-align: left;
width: 200px;
background-color: #eee;
display: block;
margin-left: auto;
margin-right: auto;
}

<div class="layout">
<div class="centre">Some Text</div>
</div>

小开

最佳答案

在非固定宽度 div的情况下（即您不知道div将占用多少空间）。

#wrapper {
background-color: green; /* for visualization purposes */
text-align: center;
}
#yourdiv {
background-color: red; /* for visualization purposes */
display: inline-block;
}

<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>

请记住，#yourdiv的宽度是动态的->它将增长和缩小以容纳其中的文本。

您可以在Caniuse上检查浏览器兼容性

小开

您可以使用位置：相对；然后设置左侧和顶部值：

.cenverDiv{
position:relative;
left:30%;
top:0px;
}

小开

您可以在CSS上使用margin: 0 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>

JsFiddle

小开

使用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"
});
});
});

小开

对这个问题的最佳回答是使用margin-auto，但要使用它，您必须知道px或%中div的width。

CSS代码：

div{
width:30%;
margin-left:auto;
margin-right:auto;
}

小开

如果您的<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>

小开

您应该在父元素上使用position: relative和text-align: center，然后在要居中的子元素上使用display: inline-block。这是一个简单的CSS设计模式，适用于所有主要浏览器。下面是一个示例或查看代码示例。

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>

小开

问题的标题和内容实际上是不同的，所以我将使用Flexbox发布两个解决方案。

我猜Flexbox将在IE8和IE9完全销毁时替换/添加到当前的标准解决方案；）

查看当前flexbox的浏览器兼容性表

单一元素

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

<div class="container">
<img src="http://placehold.it/100x100">
</div>

多个元素，但中心只有一个

默认行为是flex-direction: row，它将在一行中对齐所有子项目。将其设置为flex-direction: column将有助于堆叠行。

.container {
display: flex;
flex-direction: column;
}
.centered {
align-self: center;
}

<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div class="centered"><img src="http://placehold.it/100x100"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>

小开

如果旧的浏览器不是问题，请使用HTML5/CSS3。如果是，请应用Poly填充并仍然使用HTML5/CSS3。我假设您的div在这里没有边距或填充，但它们相对容易解释。代码如下。

.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}

它的作用是：

将div相对于其容器放置；
将div的左边界水平放置在其容器宽度的50%处；
水平向后平移div自身的宽度的50%。

很容易想象这个过程来确认div最终会水平居中。作为奖励，你可以垂直居中，无需额外费用：

.centered-vertically {
position: relative;
top: 50%;
transform: translateY(-50%);
}

这种方法的优点是您不必做任何违反直觉的事情，例如将您的div视为某种文本，将其包装在（通常在语义上无用的）附加容器中，或者为其提供固定宽度，这并不总是可能的。

如果需要，不要忘记transform的供应商前缀。

小开

我使用div和跨度标签以及css属性，例如块、跨浏览器inline-block和text对齐中心，参见我的简单示例

<!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>

小开

在你的html文件中，你写：

<div class="banner">
Center content
</div>

你写的css文件：

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}

为我工作。

小开

在某些情况下，利润率-左：自动和利润率-右：自动的用法可能不起作用。这是一个总是有效的解决方案。您指定所需的宽度，然后将左边距设置为剩余宽度的一半。

    <div style="width:80%; margin-left:calc(10%);">
your_html
</div>

小开

将此类添加到您的css文件中，它将完美地工作步骤：

1）首先创建此

<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;
display: table;
}

小开

请使用下面的代码，您的div将在中间。

.class-name {
display:block;
margin:0 auto;
}

小开

九年后，我认为是时候推出一个新版本了。以下是我最喜欢的两个（现在是一个）。

保证金

将margin设置为auto。您应该知道方向序列是margin: *top* *right* *bottom* *left*;或margin: *top&bottom* *left&right*

aside{
display: block;
width: 50px;
height: 100px;
background-color: green;
float: left;
}


article{
height: 100px;
margin: 0 0 0 50px; /* 50px aside width */
background-color: grey;
}


div{
margin: 0 auto;
display:block;
width: 60px;
height: 60px;
background-color: blue;
color: white;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
</aside>
<article>
<div>The div</div>
</article>
</body>
</html>

中心：浪费，不要用这个！

使用<center></center>标签作为您的<div></div>的包装。

示例：

aside{
display:block;
background-color:green;
width: 50px;
height: 100px;
float: left;
}


center{
display:block;
background-color:grey;
height: 100px;
margin-left: 50px; /* Width of the aside */
}


div{
display:block;
width: 60px;
height: 60px;
background-color:blue;
color: white;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<aside>
</aside>
<article>
<center>
<div>The div</div>
</center>
</article>
</body>
</html>

小开

如果您知道div的宽度并且它是固定的，则可以使用以下css：

margin-left: calc(50% - 'half-of-your-div-width');

其中“你的div宽度的一半”应该（显然）是你的div宽度的一半。