flex水平居中 - html居中
如何水平居中<div>? (20)
仅水平居中
根据我的经验,水平居中框的最佳方法是应用以下属性:
容器:
- 应该有
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>
另见这个小提琴 !
如何使用CSS在另一个<div>
水平居中<div>
?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
文字对齐:中心
应用text-align: center
,内联内容在行框中居中。 但是,由于内部div默认width: 100%
您必须设置特定宽度或使用以下其中一项:
#inner {
display: inline-block;
}
#outer {
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
保证金:0自动
使用margin: 0 auto
是另一种选择,它更适合旧版浏览器的兼容性。 它与display: table
一起使用。
#inner {
display: table;
margin: 0 auto;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Flexbox的
display: flex
行为类似于块元素,并根据flexbox模型列出其内容。 它适用于justify-content: center
。
请注意: Flexbox与大多数浏览器兼容,但不是全部。 有关浏览器兼容性的完整和最新列表,请参见here 。
#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
转变
transform: translate
允许您修改CSS可视化格式模型的坐标空间。 使用它,元素可以被平移,旋转,缩放和倾斜。 要水平居中,需要position: absolute
和left: 50%
。
#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
<center>
(已弃用)
标签<center>
是text-align: center
的HTML替代品。 它适用于较旧的浏览器和大多数新浏览器,但它不被认为是一种好的做法,因为此功能已obsolete并已从Web标准中删除。
#inner {
display: inline-block;
}
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
Chris Coyier在他的博客上撰写了一篇关于“未知中心”的优秀文章 。 这是多种解决方案的综合。 我发布了一个未在此问题中发布的内容。 它有更多的浏览器支持,然后是flexbox-solution,你没有使用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;
}
Flex拥有超过97%的浏览器支持覆盖率,可能是在几行内解决这些问题的最佳方法:
#outer {
display: flex;
justify-content: center;
}
如果内容的宽度未知,您可以使用以下方法 。 假设我们有这两个元素:
-
.outer
- 全宽 -
.inner
- 没有宽度设置(但可以指定最大宽度)
假设元素的计算宽度分别为1000px和300px。 请按以下步骤操作:
- 在
.center-helper
里面包裹.inner
- 使
.center-helper
成为内联块; 它变成与.inner
相同的尺寸,使其宽300px。 - 将
.center-helper
相对于其父级向右推50%; 这将其左侧置于500px wrt。 外。 - 推
.inner
相对于其父母50%左右; 这将其左侧置于-150px wrt。 中心助手,这意味着它的左边是500 - 150 = 350px 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>
.outer {
overflow: hidden;
}
.center-helper {
float: left;
position: relative;
left: 50%;
}
.inner {
float: left;
position: relative;
left: -50%;
}
一些海报提到了使用display:box
的CSS 3中心方式。
此语法已过时,不应再使用。 [另见本文] 。
因此,为了完整起见,这是使用Flexible 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 */
}
.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 */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
如果您需要支持使用较旧语法的旧版浏览器, here's一个很好看的地方。
你可以做这样的事情
#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
属性;
例如,请参阅以下链接和以下代码段:
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内容必须像小提琴上的这个例子 。
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>
好吧,我设法找到一个可能适合所有情况的解决方案,但使用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);
})
});
如果不给它宽度,它就不能居中,否则默认情况下整个水平空间。
如果您不想设置固定宽度而不想要额外的边距,请在元素中添加display: inline-block
。
您可以使用:
#element {
display: table;
margin: 0 auto;
}
对于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模式中对于旧版浏览器支持是必需的。
我创建了这个example来展示如何垂直和水平 align
。
代码基本上是这样的:
#outer {
position: relative;
}
和...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
即使重新调整屏幕大小 ,它也会保留在center
。
我意识到我已经很晚了,但这是一个非常受欢迎的问题,我最近发现了一种我在这里没有提到的方法,所以我想我会记录它。
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
编辑:两个元素必须具有相同的宽度才能正常运行。
我最近不得不将一个“隐藏”的div(即display:none;)居中,其中有一个表格形式,需要以页面为中心。 我编写了以下jQuery来显示隐藏的div然后将CSS更新为自动生成的表格宽度并更改边距以使其居中。 (通过单击链接触发显示切换,但不需要显示此代码。)
注意:我正在分享这段代码,因为谷歌带我参加了这个解决方案,除了隐藏的元素没有任何宽度,并且在显示之前无法调整大小/居中,所以一切都会有效。
$(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不需要任何额外的财产来实现这一点。
最简单的方法:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
设置width
并将margin-left
和margin-right
为auto
。 但这仅适用于横向 。 如果你想要两种方式,那么你就是两种方式。 不要害怕尝试; 它不像你会打破任何东西。
这个方法也很好用:
div.container {
display: flex;
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
对于内部<div>
,唯一的条件是它的height
和width
不得大于其容器的height
和width
。
这是你想要的最短的方式。
#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 % );
}