文章目录
块元素水平或垂直居中是页面中常用的布局,整理如下
1.水平居中对齐
1.1 设置margin:0 auto
{
margin:0 auto;
}
设置在子元素上
1.2 使用flex布局,设置justify-content
该属性将设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,设置在弹性容器上。
{
display: flex;
justify-content: center;
}
2.垂直居中对齐
2.1 使用flex布局,设置align-items
该属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式,设置在弹性元素上。
{
align-items: center;
}
设置在父元素上
2.2 使用absolute布局
{
position: absolute;
border: 1px solid black;
background-color: green;
width: 300px;
height: 200px;
top: 50%;
bottom: 0px;
left: 0px;
right: 0px;
margin-top: -100px;
}
设置在子元素上
2.3 使用table-cell布局
{
display: table-cell;
vertical-align: middle;
}
该布局设置在父元素上。
2.4 使用transform
{
position: absolute;
top: 50%;
left: 50%;
bottom: 0px;
right: 0px;
transform: translate(-50%, -50%);
height: 100px;
}
设置在子元素上。
总结
1.使用flex布局,设置align-items和justify-content分别达到垂直和水平居中比较方便,而且可以针对不定宽度和高度的块元素。因为flex定位个人感觉最为方便。
2.table-cell布局也可以实现未知高度块元素的垂直居中。
demo代码
拷贝如下代码保存成.html文档,chrome浏览器打开既能看到效果。
<!DOCTYPE html>
<head>
<meta charset="utf-8"></mata>
<style type="text/css">
.outerContainer {
border: 1px solid black;
background-color: red;
width: 500px;
height: 300px;
position: relative;
}
.flex-vertical {
display: flex;
align-items: center;
}
.flex-horizon {
display: flex;
justify-content: center;
}
.innerContainer {
border: 1px solid black;
background-color: green;
width: 300px;
}
.setMargin {
border: 1px solid black;
background-color: green;
width: 300px;
margin: 0 auto;
}
.useAbsolute {
position: absolute;
border: 1px solid black;
background-color: green;
width: 300px;
height: 200px;
top: 50%;
bottom: 0px;
left: 0px;
right: 0px;
margin-top: -100px;
}
.table-cell-vertical {
display: table-cell;
vertical-align: middle;
}
.transform {
position: absolute;
top: 50%;
left: 50%;
bottom: 0px;
right: 0px;
transform: translate(-50%, -50%);
height: 100px;
}
</style>
</head>
<body>
<div class="outerContainer flex-horizon flex-vertical">
<div class="innerContainer">
设置display:flex;align-items:center;justify-content:center;使块元素水平垂直居中对齐;
<br />
其中align-items属性控制块元素的垂直对齐方向,justify-content控制块元素的水平对齐方向
</div>
</div>
<div class="outerContainer">
<div class="setMargin">
设置margin:0 auto;使块元素水平居中对齐
</div>
</div>
<div class="outerContainer">
<div class="useAbsolute">
使用absolute定位,这种适合用在内部元素的高度固定的情况。同时可以设置margin:0 auto;使其水平居中;
</div>
</div>
<div class="outerContainer table-cell-vertical">
<div class="innerContainer">
将父元素display设置为table-cell.要需要水平居中,还可以将子元素设置为inline-block,然后设置
text-align:cneter使子元素水平居中。
</div>
</div>
<div class="outerContainer">
<div class="innerContainer transform">
使用transform水平垂直居中
</div>
</div>
</body>