元素居中方案

最新推荐文章于 2022-09-22 13:40:16 发布

jiang_my

最新推荐文章于 2022-09-22 13:40:16 发布

阅读量181

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/jiang_my/article/details/79557047

版权

面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

已知元素宽高和未知元素宽高

写法1（垂直水平居中）

.container {
   position:abosolute;
   top:50%;
   left:50%;
   margin-left:-包含块宽度的一半;
   margin-top: -包含块高度的一半;
}

写法2（一个块状元素水平居中）

.container {
    width: 300px;
    margin: 0 auto;
}

写法3（行内元素水平居中）

行内元素包裹在一个display为block的父级元素中时，父级元素text-align:center即可实现行内元素居中

.container{
  text-align: center;
}

写法4（多个块状元素水平居中）

参照写法3

内部div设置为内联块display：inline-block；包裹元素设置为text-align：center；

写法5（单行的内元素垂直居中）

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>单行内元素垂直居中</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: rgb(30, 186, 250);
      }
      /*设置父块大小及颜色*/

      div a {
        text-decoration: none;
        font-size: 25px;
        color: rgb(254, 7, 183);
        font-weight: 700;
        line-height: 200px;
      }
      /*设置内联元素的行高等于父块高度的行高即可实现垂直居中*/

      span {
        display: inline-block;
        width: 150px;
        height: 150px;
        font-size: 35px;
        line-height: 150px;
        background: rgb(97, 71, 130);
      }
      /*原理同上,行高等于块的高度即可实现内容垂直居中*/

    </style>
  </head>

  <body>
    <div><a href="#">测试链接</a></div>
    <span>测试文字</span>
  </body>

</html>

写法6（多行的行内元素垂直居中）

让包裹块模拟表格单元,然后用vertical-align进行控制位置(支持英文单词位置也支持百分比调整)

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>多行的行内元素垂直居中</title>
  <style>
      .wrap{
        height:700px;
        width:700px;
        background: rgb(1, 244, 68);
        display: table-cell;
        vertical-align: middle;
      }
      /*让包裹块模拟表格效果,产生垂直居中效果*/
  </style>
</head>
<body>
    <div class="wrap"><span>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex facere repellendus, porro velit, modi culpa, tempora totam dolore quaerat natus vel fugiat non voluptas unde quod fuga, iusto cumque rem.</span>
        <span>Beatae natus obcaecati error fugiat harum consequatur possimus modi tempore aut tenetur nostrum illo maxime consequuntur, nulla, blanditiis alias voluptas voluptates neque minus accusamus cumque rem inventore. Eligendi, tempora, impedit.</span>
        <span>Optio delectus, aliquid pariatur fugit eveniet accusantium eius et veritatis blanditiis temporibus, sed reiciendis sunt quae quam obcaecati labore quia sit debitis recusandae alias rerum! Libero adipisci sed velit facere.</span>
        <span>Laudantium, adipisci in nulla atque aut similique voluptatum maxime corrupti nobis, consequatur impedit ipsa reprehenderit voluptates quo, inventore tempora tenetur quibusdam deserunt! Animi impedit, earum dolore. Inventore sequi nemo saepe.</span>
        <span>Eligendi, porro voluptas molestiae, corrupti atque ad dolor cupiditate tempore adipisci similique. Dolorum voluptates id nam, non ipsum optio, incidunt culpa quia fuga vitae qui suscipit consectetur ipsa nesciunt aut.</span>
      </span></div>
</body>
</html>

写法7

父块使用display:flex属性,子块margin自适应即可实现

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>块状元素垂直居中(已知高度)</title>
  <style>
      *{margin: 0;padding: 0;}
      .parent{
          display: flex;
          height:500px;
          background: #03A1FA;
      }
      .child{
        width: 100px;
        height: 100px;
        margin: auto;
        background: #BB3713;
      }
      /*
      这个依赖于设置`margin`值为`auto`值，自动获取伸缩容器中剩余的空间。
      所以设置垂直方向`margin`值为`auto`，可以使伸缩项目在伸缩容器的两上轴方向都完全集中。
       */
  </style>
</head>
<body>
      <div class="parent">
            <div class="child">ff</div>
      </div>
</body>
</html>

写法8

使用transform:translate属性来调整

.container{
   position: absolute; // 会找到最近的一个position:relative父类进行偏移
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

写法9

定义居中元素的父元素justify-content和align-items属性为center即可,
需要设置足够的高度,不然只有水平居中效果

<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="UTF-8">
    <title>flex实现子块的完美居中</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .parent {
        display: flex;
        justify-content: center;
        align-items: center;

        height:900px;
        background: #03A1FA;
      }


      .child {
        width: 100px;
        height: 100px;
        background: #BB3713;
      }

    </style>
  </head>

  <body>
    <div class="parent">
      <div class="child">啦啦德玛新亚</div>
    </div>
  </body>

</html>

写法10

借助table的特性来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        .test{
            display:table;
            height:800px;
            width:800px;
            background:#99cc99;
            border-radius:5px;
            border:1px solid #f70;

        }
        .test>span{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
        }
        .test>span>img{
            height:400px;
            width:400px;
            border-radius:50%;
            box-shadow:1px 1px 3px rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div class="test">
        <span><img src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>
    </div>
</body>
</html>