css居中的几种方式

最新推荐文章于 2022-03-24 21:19:42 发布

weixin_34247155

最新推荐文章于 2022-03-24 21:19:42 发布

阅读量5.4k

点赞数 4

原文链接：https://juejin.im/post/5c821a716fb9a049b7812999

版权

水平居中

1.定宽块级元素

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

<style>
  div{
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
  }
</style>
<body>
  <div>
    Hello World
  </div>
</body>
复制代码

2.不定宽块级元素

我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式
加入 table 标签
设置 display;inline 方法

1.加入 table 标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )

第二步：为这个 table 设置“左右 margin:auto”

<style>
  table{
    margin:0 auto;
  }
  ul{list-style:none;margin:0;padding:0;}
  li{float:left;display:inline;margin-right:8px;}
  </style>

<div>
  <table>
    <tbody>
      <tr><td>
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </td></tr>
    </tbody>
  </table>
</div>
复制代码

这种方法的缺点是增加了无语义的HTML标签，增加了嵌套深度

2.设置 display:inline 方法

改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果

<style>
  .container{
    text-align:center;
  }
  .container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
  }
  .container li{
    margin-right:8px;
    display:inline;
  }
</style>
<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>
复制代码

这种方法的缺点是将块级元素的display设置为inline，于是少了很多功能，比如盒子模型

3 设置 position:relative 和 left:50%;

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%,给子元素设置 position:relative 和 left:-50% 来实现水平居中。

<style>
  .container{
    float:left;
    position:relative;
    left:50%
  }
  .container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
  }
  .container li{float:left;display:inline;margin-right:8px;}
</style>
<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>
复制代码

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

垂直居中

1.常规元素的垂直居中

容器内元素display:inline/inline-block

这种情况就比较容易了，直接设置容器的text-align就可以实现内容元素的水平居中，设置垂直居中的话要设置容器的高度，然后设置容易的line-height==height就可以，如下：

<style>  
  .container{
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
</style>

 <div class="container">
     <span>我要居中</span>
 </div>
复制代码

2.容器内元素display:block且元素宽高已知

这种情况下我们使用position这个属性结合设置偏移来实现。

首先设置容器的position:relative,设置元素position为absolute

然后设置元素的偏移top,left,margin-top,margin-left，其中top，left设置为50%,而margin-top/margin-left的偏移量均为本身元素高/宽的一半，为负值。

<style> 
    container {
        height: 200px;
        width: 200px;
        background: pink;
        position: relative;
    }
    inner-box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        height: 100px;
        width: 100px;
        background: green;
    }
  </style>

<div class="container">
        <div class="inner-box"></div>
    </div>
复制代码

3.容器内元素display:block,且元素宽高未知

这种方法与方法二类似，但是不同的是不能通过设置margin-top/left偏移来达到效果了，因为容器内元素的宽高是未知的。这次通过设置left/top/bottom/right:0,然后设置margin:auto

<style> 
    .container {
            height: 200px;
            width: 200px;
            background: pink;
            position: relative;
        }

    .inner-box {
        position: absolute;
        height: 100px;
        width: 100px;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background: green;
    }
  </style>

<div class="container">
        <div class="inner-box"></div>
    </div>
复制代码

4 table-cell

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。

html

<div class="box box1">
        <span>垂直居中</span>
</div>
复制代码

css

    .box1 {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width:100px;
           height:100px;
           background-color:red
        }
复制代码

第二种用法，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b，a和b都是div，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：

如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

现在我要让class="box"的div在class="wrapper"的div里面垂直居中，我可以在class="wrapper"的div里面加一个div空标签，把它的高度设为100%，宽度设置为0，再给它一个vertical-align:middle样式，同样的给class="box"的div一个vertical-align:middle样式，那么box就可以在div里面垂直居中了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS垂直居中</title>
    <style>
        .wrapper{
            width: 500px;
            height: 500px;
            background-color: pink;

            text-align: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;

            display: inline-block;
            vertical-align: middle;
            margin: 0 auto;
        }

        .help{
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
    <div class="help"></div>
</div>
</body>
</html>
复制代码

5 display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}
复制代码

6 translate

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:50%;
            height:50%;
            transform:translate(-50%,-50%);
            text-align: center;
            background: #000;
        }

复制代码

转载于:https://juejin.im/post/5c821a716fb9a049b7812999

weixin_34247155

关注

4
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
css居中的几种方式

水平居中1.定宽块级元素满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的<style> div{ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ }</style><body> ...
复制链接

扫一扫