css – 在引导响应页面如何中心一个div

前端之家收集整理的这篇文章主要介绍了css – 在引导响应页面如何中心一个div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要创建一个响应页使用引导通过在页面的中心位置一个div,如下面提到的布局。

解决方法

看一下这个-
  1. @import url('http://getbootstrap.com/dist/css/bootstrap.css');
  2. html,body,.container-table {
  3. height: 100%;
  4. }
  5. .container-table {
  6. display: table;
  7. }
  8. .vertical-center-row {
  9. display: table-cell;
  10. vertical-align: middle;
  11. }
  1. <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
  2.  
  3. <div class="container container-table">
  4. <div class="row vertical-center-row">
  5. <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
  6. </div>
  7. </div>

这是一个在所有屏幕尺寸中居中的水平和垂直div的简单示例。

猜你在找的CSS相关文章