bootstrap 垂直居中布局_如何居中一个元素（终结版）

最新推荐文章于 2024-08-30 12:39:47 发布

weixin_42138139

最新推荐文章于 2024-08-30 12:39:47 发布

阅读量1.5k

点赞数 1

文章标签： bootstrap 垂直居中布局

本文链接：https://blog.csdn.net/weixin_42138139/article/details/112441958

版权

本文详尽探讨了Bootstrap中的水平、垂直以及水平垂直居中的多种方法，包括使用text-align、margin、display属性、flex布局、absolute定位等。无论是在块级元素、行内元素，还是浮动元素上，都有对应的居中策略。同时，文中还提供了针对不同场景的实用解决方案，并对CSS3的新特性进行了讨论。

摘要由CSDN通过智能技术生成

(给前端大全加星标，提升前端技能)

作者：前端工匠公号 / 浪里行舟 (本文来自作者投稿)

前言

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：

一、水平居中

1.行内元素水平居中

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

.parent{ //在父容器设置

text-align:center;

}

此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

<div class="parent">

  <div class="child">Demo</div>

</div>

<style>

  .parent{

    text-align:center;

  }

  .child {

    display: inline-block;

  }

</style>

2.块级元素的水平居中

这种情形可以有多种实现方式，下面我们详细介绍:

①将该块级元素左右外边距margin-left和margin-right设置为auto

.child{

width: 100px;//确保该块级元素定宽

margin:0 auto;

}

②使用table+margin

先将子元素设置为块级表格来显示(类似)，再将其设置水平居中

display:table在表现上类似block元素，但是宽度为内容宽。

<div class="parent">

  <div class="child">Demo</div>

</div>

<style>

  .child {

    display: table;

    margin: 0 auto;

  }

</style>

③使用absolute+transform

先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。

<div class="parent">

  <div class="child">Demo</div>

</div>

<style>

  .child {

    position:absolute;

    left:50%;

    transform:translateX(-50%);

  }

  .parent {

    position:relative;

  }

</style>

不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。

④使用flex+justify-content

通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

<div class="parent">

  <div class="child">Demo</div>

</div>

<style>

  .parent {

    display: flex;

    justify-content:center;

  }

</style>