flex vue 垂直居中居上_布局篇--居中

最新推荐文章于 2024-04-23 17:04:18 发布

jiyulishang

最新推荐文章于 2024-04-23 17:04:18 发布

阅读量1.3w

点赞数 2

文章标签： flex vue 垂直居中居上

本文链接：https://blog.csdn.net/weixin_26757949/article/details/112418868

版权

一、元素内部文字居中：

想要元素内部的文字居中，首先该元素要可以设置宽高，即为块状元素（div）或行内块元素，如果元素为行内元素（span），可通过display：block/inline-block设置为块状元素或行内块；

1、单行文本居中：

水平居中：text-align: center;

垂直居中：height: 100px; line-height: 100px;

2、多行文本居中：

水平居中：通过设置左右padding相等来实现；

垂直居中：通过设置上下padding相等来实现；

注：该方法涉及到盒模型，如果元素自身未设置高度，高度由内容撑开，则需为box-sizing：content-box；如果元素自身设置了高度，则需为box-sizing：border-box；因为不同浏览器box-sizing默认的值不一致，故如果出现未水平或垂直居中，可通过设置该属性实现最终效果。

3、模拟table的属性实现文本居中：

该方法需要在元素外部包裹一个父级块状元素，此时父元素宽高固定，子元素未设置宽高，继承父元素的宽高，使用vertical-align：middle实现文本垂直居中，text-align：center实现水平居中；（兼容性：在IE8及以上版本使用，在IE7及以下的版本并不能很好的支持display:table和display:table-cell属性；）

<body>
   <div id="div1">
      <div class="inner">
          这是多行文本垂直居中，
      </div>
   </div>
</body>
<style>
      #div1{
          display: table;
          width: 400px;
          height: 200px;
          border: 1px solid red;
      }
      .inner{
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          border: 1px solid blue;
      }
</style>

4、元素本身居中：

因为没有父元素，父元素默认为body，body宽度默认是100%；故可通过左右margin为auto来实现水平居中，通过设置上下margin为具体值，实现垂直方向的位置变动。（父元素为body，设置上下margin为auto无效）

二、元素内部的元素居中：

外部元素必须为块状元素或行内块且宽高固定；内部元素可为块状元素，也可为行内元素，视情况而sing；

1、内部元素为行内元素，相当于内部是文本，参考文本居中的设置；也可以将行内元素通过display：block/inline-block设置成块状元素/行内块元素，然后使用对应的方法。

2、内部元素为块状元素或行内块：

（1）使用position定位：

子div固定大小，设定水平和垂直偏移父元素的50%，这时子元素的左上角在父元素的中心点，将子元素外边距向上和向左挪回自身的一半大小，即可实现子元素的中心点与父元素的中心点重合，达到居中的效果；该方法兼容IE7、IE6；

  <body>
    <div id="div1">
        <div class="inner">
          ...
        </div>
</div>
</body>
<style>
      #div1{
          position: relative;
          width: 500px;
          height: 500px;         
          background-color: coral;
      }
      .inner{
          position: absolute;
          background-color: darkcyan;
          width: 300px;
          height: 200px;
          top: 50%;
          left: 50%;
          margin-top: -100px;
          margin-left: -150px;
      }
</style>

（2）使用position定位，利用空间的拉扯制衡实现：

子div宽高固定，设置上下左右的距离均为0，margin为auto，通过拉扯实现居中；该方法不兼容IE7、IE6

<body>
    <div id="div1">
        <div class="inner">
          我是谁？我在那儿？
        </div>
</div>
</body>
<style>
      #div1{
          position: relative;
          width: 500px;
          height: 500px;         
          background-color: coral;
      }
      .inner{
          position: absolute;
          background-color: darkcyan;
          width: 300px;
          height: 200px;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          margin: auto;
      }
</style>

（3）利用css3的新属性transform实现；

同方法（1）的原理，首先利用top：50%，left：50%使子div的左上角位于父元素的中心点，在使用css3的新属性transform：translate来实现子div相对于父元素的位移；此方法不要求子元素的宽高固定（IE9之前的版本不支持。）

<body>
    <div id="div1">
        <div class="inner">
          我是谁？我在那儿？
        </div>
</div>
</body>
<style>
      #div1{
          position: relative;
          width: 500px;
          height: 500px;         
          background-color: coral;
      }
      .inner{
          position: absolute;
          background-color: darkcyan;
          width: 300px;
          height: 200px;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%); /*缩写：translate(-50%,-50%) */
      }
</style>

（4）利用flex布局

此方法不要求子元素的宽高固定，E9及以下IE浏览器版本都不支持；

<body>
    <div id="div1">
        <div class="inner">
          我是谁？我在那儿？
        </div>
</div>
</body>
<style>
      #div1{
          display: flex;
          align-items: center;/*如果flex-direction：row；代表垂直居中 ；如果flex-direction：column；则代表水平居中*/
          justify-content: center;/*如果flex-direction：row；代表水平居中；如果flex-direction：column；则代表垂直居中*/
          background-color: coral;
          width: 500px;
          height: 500px;       
      }
      .inner{
          background-color: darkcyan;  
      }
</style>

（5）模拟table的属性

将父元素定义成display：table-cell，模拟表格的样式，父元素设置vertical-align：middle可实现子元素垂直居中；固定子元素的宽度，通过设置子元素的左右外边距为auto，实现水平居中，对子元素的高度不做要求；不能兼容IE7、IE6

<body>
    <div id="div1">
        <div class="inner">
          我是谁？我在那儿？
        </div>
</div>
</body>
<style>
      #div1{
        display: table-cell;
         vertical-align: middle;
          background-color: coral;
          width: 500px;
          height: 500px;       
      }
      .inner{
          background-color: darkcyan;  
          width: 100px;
          margin: 0 auto;
      }
</style>

以上是我整理的一些居中布局的方法，作为学习笔记，欢迎大家指正补充。

参考文档：https://blog.csdn.net/u014607184/article/details/51820508

jiyulishang

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
flex vue 垂直居中居上_布局篇--居中

一、元素内部文字居中：想要元素内部的文字居中，首先该元素要可以设置宽高，即为块状元素（div）或行内块元素，如果元素为行内元素（span），可通过display：block/inline-block设置为块状元素或行内块； 1、单行文本居中：水平居中：text-align: center; 垂直居中：height: 100px; line-heig...
复制链接

扫一扫