您的位置：首页 > Web前端 > BootStrap

最全css与bootstrap的水平垂直居中

2020-06-09 05:02 826 查看

一. 水平居中

1.块元素在已知宽度的情况下为其自身设置margin:auto(可以用block转为块元素)

.Wrap{
border: 1px black solid;
width: 100px;height: 100px;
margin: auto;
}

2.内联元素可以为其父元素设置text-align:center;(可以用table-cell,inline,inline-block将块元素转为内联元素）

.Wrap{
border: 1px black solid;
text-align: center;
}
  1. margin和width
前提：已知 width值 margin-left: auto;margin-right: auto; 
.wrap{
width: 100px;height: 100px;
margin-left: auto;
margin-right: auto;
border: 1px aqua solid;
}
  1. 绝对定位和left:0；right:0;
设置了绝对定位后，margin：auto就失效了，此时只需加上left: 0;right: 0;即可居中 
.wrap{
width: 100px;
height: 100px;
border: 1px red solid;
position: absolute;
left: 0;right: 0;
margin: auto;
}
  1. 绝对定位和margin-left:-(宽度值/2)
适合固定宽度元素，当浏览器宽度小于元素宽度时与margin:auto；有明显不同 
.wrap{
width: 100px;
height: 100px;
border: 1px red solid;
position: absolute;
left:50%;
margin-left: -50px;
}
  1. 绝对定位和transform
宽度未定的情况下水平居中，IE9以下不能使用 
.wrap{
border: 1px red solid;
position: absolute;
left:50%;
transform: translateX(-50%);
}
  1. flex布局
/* html*/
<div class="wrap">
<div class="box"></div>
</div>
/* css*/
.wrap{
width: 300px;
height: 300px;
border: 1px red solid;
display: flex;
justify-content: center;
}
.box{
width: 100px;height: 100px;
background-color: blue;
}
  1. 网格布局
/* html*/
<div class="wrap">
<div class="box"></div>
</div>
/* css*/
.wrap7{
width: 300px;
height: 300px;
border: 1px red solid;
display: grid;
justify-content: center;
}
.box1{
width: 100px;height: 100px;
background-color: blue;
}

二.垂直居中

  1. 伪类after
vertical-align使同一个父元素的元素互相垂直居中，而不是根据父元素垂直居中，所以当其中一个元素的高度跟父元素相同时，其余元素便会相对父元素垂直居中，但是vertical-align只对行内元素有效，所以子元素最好设置display: inline-block;属性 
/* html*/
<div class="box">
<div class="Wrap2">
<p>伪类实现居中</p>
</div>
</div>

/* css*/
.box{
text-align: center;
overflow: auto;
width: 300px;
height: 300px;
border: 1px red solid;
margin: auto;
}
.Wrap2{
display: inline-block;
vertical-align: middle;
}
.box::after{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}

2.单行元素设置line-height与height相等

/*html*/
<div class="wrap"> 垂直居中 </div>
/*css*/
.wrap{
width: 100px;height: 100px;
line-height: 100px;
border: 1px red solid;
}

3.绝对定位与bottom:0;top:0;

.wrap{
width: 100px;height: 100px;
background-color: red;
position: absolute;
bottom:0;top:0;
margin:auto;
}

4.绝对定位与margin-top

.wrap{
width: 100px;height: 100px;
position: absolute;
top:50%;
margin-top: -50px;
border: 1px red solid;
}

5.绝对定位与transform

.wrap{
width: 100px;height: 100px;
position: absolute;
top:50%;
transform: translateY(-50%);
border: 1px red solid;
}

6.flex布局

利用flex的align-items属性实现子元素在父元素内的垂直居中，align-self也行 
/* html*/
<div class="wrap">
<div class="box"></div>
</div>
/* css*/
.wrap{
width: 300px;
height: 300px;
border: 1px red solid;
display: flex;
align-items: center;
}
.box{
width: 100px;height: 100px;
background-color: blue;
}
设置父元素为flex布局之后，子元素直接使用margin:auto;即可实现子元素在父元素内的垂直居中 
/* html*/
<div class="wrap">
<p>垂直居中</p>
</div>
/* css*/
.wrap{
width: 100px;height: 100px;
border: 1px red solid;
display: flex;
}
p{margin: auto;}

7.网格布局

利用grid的align-items属性实现子元素在父元素内的垂直居中，align-self也行 
/* html*/
<div class="wrap">
<div class="box"></div>
</div>
/* css*/
.wrap7{
width: 300px;
height: 300px;
border: 1px red solid;
display: grid;
align-items: center;
}
.box1{
width: 100px;height: 100px;
background-color: blue;
}
设置父元素为flex布局之后，子元素直接使用margin:auto;即可实现子元素在父元素内的垂直居中 
<div class="wrap">
<p>垂直居中</p>
</div>
/* css*/
.wrap{
width: 100px;height: 100px;
border: 1px red solid;
display: grid;
}
p{margin: auto;}

8.表格布局

父元素使用display: table; 子元素使用display: table-cell;vertical-align: middle;即可 
.wrap{
width: 100px;height: 100px;
border: 1px red solid;
display: table;
text-align: center;
}
box{vertical-align: middle;display: table-cell;}

三.bootstrap的居中

bootstrap框架将以上水平垂直进行了封装 ,主要使用网格布局和弹性布局，能够自适应于台式机、平板电脑和手机。对应如下

bootstrap css
text-center text-align:center
m-auto margin:auto
justify-content: center; justify-content-center;
align-items: center; align-items-center;
col-offset offset
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航