我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
当前回答
经过大量研究,我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
其他回答
使用Flexbox可以轻松将内容居中。以下代码显示了容器的CSS,其中的内容需要居中:
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
这个解决方案适用于块元素(例如,<div>)。我用颜色使溶液更清晰。
HTML格式:
<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>
CSS:
main {
position: relative;
width: 400px;
height: 400px;
}
.skin_orange {
outline: thin dotted red;
background: orange;
}
.bigBox {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.skin_blue {
background-color: blue;
}
JSFiddle代码演示
我用这个。它适用于Internet Explorer 8和更高版本:
高度:268px-用于显示:表的作用类似于最小高度。
CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #cc9999;
}
p {
background: #f0ad4e;
}
#all {
margin: 200px auto;
}
.ff-valign-wrap {
display: table;
width: 100%;
height: 268px;
background: #ff00ff;
}
.ff-valign {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
background: #ffff00;
}
HTML格式:
<body>
<div id="all">
<div class="ff-valign-wrap">
<div class="ff-valign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
</div>
</div>
</div>
</body>
CSS网格
正文,html{margin:0;}正文{显示:栅格;最小高度:100vh;对齐项目:居中;}<div>div垂直对齐</div>
居中是CSS最困难的方面之一。
这些方法本身通常不难理解。相反,这更多是因为有很多方法可以将事情集中起来。
您使用的方法可能会有所不同,这取决于您试图居中的HTML元素,或者是水平居中还是垂直居中。
水平居中
水平对中元件通常比垂直对中元件更容易。下面是一些常见的元素,您可能希望水平居中,以及不同的方法。
使用CSS文本居中属性居中文本
要使文本或链接水平居中,只需使用文本对齐属性和值中心:
HTML
<div class="container">
<p>Hello, (centered) World!</p>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
}
p {
/* Center horizontally*/
text-align: center;
}
使用CSS边距自动居中分隔
使用值为0的速记边距属性,自动将块级元素(如div)水平居中:
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center horizontally*/
margin: 0 auto;
}
使用Flexbox水平居中跳水
Flexbox是在页面上居中的最现代的方式,它使设计响应式布局比以前容易得多。然而,它在一些传统浏览器(如Internet Explorer)中并不完全受支持。
要使用Flexbox水平居中元素,只需将display:flex和justify content:center应用于父元素:
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Center child horizontally*/
display: flex;
justify-content: center;
}
.child {
width: 50px;
height: 50px;
background-color: red;
}
垂直居中
如果没有像Flexbox这样的现代方法,将元素垂直居中可能是一件很麻烦的事。在这里,我们将介绍一些较旧的方法,首先垂直居中,然后向您展示如何使用Flexbox实现这一点。
如何使用CSS绝对定位和负边距使Div垂直居中
在很长一段时间里,这是垂直居中的常用方法。对于此方法,必须知道要居中的元素的高度。
首先,将父元素的position属性设置为relative。
然后,对于子元素,将position属性设置为absolute,并将top设置为50%:
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
}
但这实际上只是将子元素的顶部边缘垂直居中。
要使子元素真正居中,请将margin-top属性设置为-(子元素高度的一半):
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
margin-top: -25px; /* Half this element's height */
}
使用变换和平移使Div垂直居中
如果您不知道要居中的元素的高度(或者即使您知道),这个方法是一个很好的技巧。
该方法与上述负边距方法非常相似。将父元素的位置属性设置为相对。
对于子元素,将position属性设置为absolute,并将top设置为50%。现在,不要使用负边距来真正居中子元素,只需使用transform:translate(0,-50%):
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
请注意,translate(0,-50%)是translateX(0)和translateY(-50%)的简写。您还可以编写transform:translateY(-50%)以垂直居中子元素。
垂直和水平居中
使用CSS绝对定位和负边距使Div垂直和水平居中
这与上述垂直居中元素的方法非常相似。和上次一样,您必须知道要居中的元素的宽度和高度。
将父元素的位置属性设置为相对。
然后将孩子的位置属性设置为绝对,顶部设置为50%,左侧设置为50%。这只会使子元素的左上角垂直和水平居中。
要使子元素真正居中,请将负上边距设置为子元素高度的一半,将负左边距设置为子元素宽度的一半:
HTML
<div class="container">
<div class="child"></div>
</div>
CSS
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
}