如何使用CSS <div>
在另一个文件中水平居中<div>
?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
如何使用CSS <div>
在另一个文件中水平居中<div>
?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Answers:
您可以将此CSS应用于内部<div>
:
#inner {
width: 50%;
margin: 0 auto;
}
当然,您不必将设置width
为50%
。任何小于包含宽度的宽度<div>
都可以使用。该margin: 0 auto
是什么呢实际定心。
如果您以Internet Explorer 8(及更高版本)为目标,最好改用以下方法:
#inner {
display: table;
margin: 0 auto;
}
它将使内部元素水平居中,并且无需设置特定参数即可工作width
。
这里的工作示例:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
margin-left: auto; margin-right: auto
我认为最好放。
margin:0 auto
:margin: <whatever_vertical_margin_you_need> auto
第二个可能是水平边距。
如果您不想在内部设置固定宽度,则div
可以执行以下操作:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
这样就使内部div
成为可以以居中的内联元素text-align
。
float: none;
可能只是因为#inner继承了CSS float
中一个left
或right
其他地方的a才需要。
text-align
因此您可能需要将inner的值设置text-align
为initial
或其他值。
最好的方法是使用CSS 3。
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
根据您的可用性,您也可以使用这些box-orient, box-flex, box-direction
属性。
弹性:
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
而这也解释了为什么盒模型是最好的办法:
-webkit
flexbox(display: -webkit-flex;
和-webkit-align-items: center;
和-webkit-justify-content: center;
)的标志
假设您的div宽度为200像素:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
确保父元素的位置是相对的,固定的,绝对的或粘性的。
如果您不知道div的宽度,可以使用transform:translateX(-50%);
而不是负边距。
https://jsfiddle.net/gjvfxxdj/
使用CSS calc(),代码可以变得更加简单:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
原理仍然相同;将物品放在中间并补偿宽度。
我创建了这个示例,以展示如何垂直和水平放置 align
。
代码基本上是这样的:
#outer {
position: relative;
}
和...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
center
即使您调整屏幕大小,它也将保持不变。
一些张贴者提到CSS 3居中使用方式display:box
。
该语法已过时,不应再使用。[另请参阅此帖子]。
因此,为了完整起见,这是使用“ 灵活框式布局”模块在CSS 3中居中的最新方法。
因此,如果您有简单的标记,例如:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
...并且您想将项目放在框中居中,这是您在父元素(.box)上需要的内容:
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
如果您需要支持使用旧版Flexbox语法的旧版浏览器,那么这里是一个不错的地方。
flex-direction
值。如果它是“行”(默认),则justify-content: center;
用于水平对齐(如我在答案中提到的);如果它是“列”,则justify-content: center;
用于垂直对齐。
如果您不想设置固定宽度并且不想增加多余的边距,请添加display: inline-block
到元素中。
您可以使用:
#element {
display: table;
margin: 0 auto;
}
display: table;
。它有什么作用?
水平和垂直。它可以与相当现代的浏览器(Firefox,Safari / WebKit,Chrome,Internet Explorer 10,Opera等)一起使用。
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
我最近不得不display:none;
居中放置一个“隐藏”的div(即),该div 中有一个需要在页面上居中的表格形式。我编写了以下jQuery代码以显示隐藏的div,然后将CSS内容更新为表格的自动生成的宽度,并更改边距以使其居中。(通过单击链接来触发显示切换,但是不需要显示此代码。)
注意:我正在共享这段代码,因为Google将我带到了这个Stack Overflow解决方案,并且一切都可以正常工作,除了隐藏元素没有任何宽度并且在显示它们之前无法调整大小/居中。
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
我通常的方法是使用绝对位置:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
外部div不需要任何其他属性即可工作。
对于Firefox和Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
对于Internet Explorer,Firefox和Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
该text-align:
属性对于现代浏览器是可选的,但在Internet Explorer Quirks Mode中,对于旧版浏览器的支持,此属性是必需的。
采用:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
另一个无需设置元素宽度的解决方案是使用CSS 3 transform
属性。
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
诀窍是translateX(-50%)
将#inner
元素设置为其宽度左侧的50%。您可以使用相同的技巧进行垂直对齐。
这是显示水平和垂直对齐的小提琴。
有关更多信息,请参见Mozilla开发人员网络。
-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
克里斯·科耶尔(Chris Coyier)在他的博客上撰写了一篇关于“未知中的居中” 的出色文章。这是多种解决方案的综述。我发布了一个不在此问题中发布的内容。它比Flexbox解决方案具有更多的浏览器支持,并且您没有使用display: table;
它可能破坏其他功能。
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
我最近找到了一种方法:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
两个元素必须具有相同的宽度才能正常运行。
#inner
:#inner { position:relative; left:50%; transform:translateX(-50%); }
。这适用于任何宽度。
例如,请参见此链接和下面的代码段:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
如果父母下有很多孩子,那么您的CSS内容必须类似于fiddle上的示例。
HTML内容如下所示:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
以我的经验,使框水平居中的最佳方法是应用以下属性:
text-align: center;
display: inline-block;
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
另请参阅此小提琴!
根据我的经验,居中的盒子最好的办法既垂直和水平是使用一个额外的容器,并应用以下属性:
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
另请参阅此小提琴!
最简单的方法:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
#outer
不需要任何东西,width:100%;
因为<div>
默认情况下总是如此width:100%
。而且text-align:center
也不是必须的
如果内容的宽度未知,则可以使用以下方法。假设我们具有以下两个元素:
.outer
- 全屏宽度.inner
-未设置宽度(但可以指定最大宽度)假设元素的计算宽度分别为1000像素和300像素。进行如下:
.inner
内.center-helper
.center-helper
内联块; 它的大小等于.inner
使其变为300像素宽。.center-helper
相对于其父对象向右推50%;这会将其左侧的像素保持在500像素。外。.inner
相对于其父对象向左推50%;这会将其左侧放置在-150像素wrt处。中心助手,这表示其左侧为500-150 = 350像素wrt。外。.outer
为隐藏以防止水平滚动条。演示:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>
你可以做这样的事情
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
这也将#inner
垂直对齐。如果不想,请删除display
和vertical-align
属性。
这是您最想得到的。
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
应用text-align: center
内联内容在行框中居中。但是,由于默认情况下,内部div具有width: 100%
宽度,因此您必须设置特定的宽度或使用以下之一:
使用margin: 0 auto
是另一种选择,它更适合于较旧的浏览器兼容性。与一起使用display: table
。
display: flex
行为类似于块元素,并根据flexbox模型布置其内容。它适用于justify-content: center
。
请注意: Flexbox与大多数浏览器兼容,但不是全部。有关完整的最新浏览器兼容性列表,请参见此处。
transform: translate
使您可以修改CSS视觉格式模型的坐标空间。使用它,可以平移,旋转,缩放和倾斜元素。要水平居中,需要position: absolute
和left: 50%
。
<center>
(已弃用)标记<center>
是的HTML替代text-align: center
。它可以在较旧的浏览器和大多数新浏览器上运行,但是由于该功能已过时且已从Web标准中删除,因此不被认为是一种好习惯。
您可以使用display: flex
外部div并水平居中添加justify-content: center
#outer{
display: flex;
justify-content: center;
}
或者,您可以访问w3schools-CSS flex属性以获取更多想法。
Flex的浏览器支持覆盖率超过97%,并且可能是在几行之内解决此类问题的最佳方法:
#outer {
display: flex;
justify-content: center;
}
好吧,我设法找到了可能适合所有情况的解决方案,但是使用了JavaScript:
结构如下:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
这是JavaScript片段:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
如果要以响应方式使用它,可以添加以下内容:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
此方法也可以正常工作:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
对于inner <div>
,唯一的条件是height
且width
不得大于其容器的。
我发现存在一个选择:
大家都说要用:
margin: auto 0;
但是还有另一种选择。为父div设置此属性。它随时随地都能完美运行:
text-align: center;
看,孩子去中心。
最后是CSS:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}