bootStrap实现垂直居中 - bootStrap技巧

方法一:受垂直导航的居中对齐启发实现此要求,具体代码如下:

一、图片的垂直(水平)居中

1 <div class="container">
2   <div class="nav flex-column justify-content-center bg-light" style="height:500px;">
3     <img src="http://www.aqzx.gov.cn/images/upfile/video/20181119115248691.jpg" width="300" height="150" class="m-auto" />
4   </div>
5 </div>  

样式说明:

a) nav 导航基类

b) 由于要实现垂直居中,所以这里定义一个垂直导航

c) justify-content-center 类用于实现内容区域垂直居中。

d) 图片通过类 m-auto 实现水平居中

 

二、文字的垂直(水平)居中

1 <div class="container">
2   <div class="nav flex-column justify-content-center bg-light text-center text-success" style="height:500px;">
3     <h1>正在学习bootStrap!</h1>
4   </div>
5 </div>

样式说明:

a) nav 导航基类

b) 由于要实现垂直居中,所以这里定义一个垂直导航

c) justify-content-center 类用于实现内容区域垂直居中。

d) 文字通过类 text-center 实现水平居中

 

方法二:通过媒体对象的align-self-center来实现,建议使用此方法

1   <div class="media bg-primary" style="height:400px;">
2     <img src="http://www.aqzx.gov.cn/images/upfile/video/20181119115248691.jpg" class="align-self-center mx-auto"/>
3   </div>

 

三、多列时垂直(水平)居中(每列的高度随最高列的高度而变化)

 1 <div class="d-flex bg-dark p-4">
 2   <div class="bg-primary text-white p-4 w-25">
 3     <div class="media h-100 bg-warning">
 4       <div class="align-self-center mx-auto bg-white text-primary">
 5         文字垂直水平居中
 6       </div>
 7     </div>
 8   </div>
 9   
10   <div class="bg-success text-white p-4  w-50">
11     <div class="media h-100 bg-warning">
12       <div class="align-self-center mx-auto bg-white text-primary">
13         <a href="#">这里是垂直居中的</a><br/><a href="#">这里是垂直居中的</a><br/><a href="#">这里是垂直居中的</a><br/>
14         这里是垂直居中的<br/>
15         <img src="aboud:block" width="350" height="129" ><br/>
16         这里是垂直居中的
17       </div>
18     </div>
19   </div>
20   
21   <div class="bg-success text-white p-4  w-25">
22     <div class="media h-100 bg-warning">
23       <div class="align-self-center mx-auto bg-white text-primary">
24         <img src="aboud:block" width="50" height="50">
25       </div>
26     </div>
27   </div>
28 </div>

 效果见下图:

样式说明:

1) 利于d-flex 元素高度相同,做包裹容器

2) 利于 media 样式的 align-self-center 样式,可实现垂直效果

 

四、HTML实现方式:

1 <div style="width:600px;height:600px;background:#f8f8f8; position:relative">
2   <div style="position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;width:300px;height:200px;background:#ccc;">
3   </div>
4 </div>

 

posted @ 2019-05-13 20:37 网申 阅读(...) 评论(...) 编辑 收藏