CSS —— 元素水平、垂直、水平垂直居中

最新推荐文章于 2022-04-13 13:58:22 发布

ZhaoYLi

最新推荐文章于 2022-04-13 13:58:22 发布

阅读量389

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/miss_zxm/article/details/86644468

版权

CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、水平居中

1、子元素宽度固定
对子元素设置：margin: 0 auto;即可。

2、子元素宽度未知
①子元素为行内元素：对父元素设置：text-align: center;即可。
②子元素是块级元素：
a：单个子元素，无需设置，子元素宽度自动铺满整个父容器。
b：多个子元素，把子元素设置为行内块级元素inline-block，父容器使用text-align:center。
如下：
3、无论宽高固定或未知，都适用的方法
①把子元素设置为行内块级元素inline-block，父容器使用text-align:center。
例1：宽度未知

<div class="container">
    <div class="inner">此子元素宽高未知，实现水平居中</div>
    <div class="inner">此子元素宽高未知，实现水平垂直居中</div>
    <div class="inner">此子元素宽高未知，实现水平垂直居中</div>
  </div>

.container {
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    border: 1px solid palevioletred;
    position: relative;
    text-align: center; 
  }

.inner {
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    display: inline-block;
    }

效果：
在这里插入图片描述
例2：宽度固定

.inner {
    width: 100px;
    height: 100px;
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    display: inline-block;
    }

效果：
在这里插入图片描述
②：flex布局。只用父容器中使用 justify-content:center;把子元素设置为在主轴方向居中即可。
且此方法可以避免子元素把父元素撑爆而溢出的情况（因为flex布局是响应式的）。
例子如下：
a：宽度固定

<div class="container">
    <div class="inner">此子元素宽高固定，flex实现水平居中</div>
  </div>

.container {
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    border: 1px solid palevioletred;
    position: relative;
    display: flex;
    justify-content: center; 
  }

.inner {
    width: 150px;
    height: 100px;
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    }

效果：
在这里插入图片描述
b：宽度未知：

.inner {
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    }

效果：
在这里插入图片描述
flex实现多个子元素响应式水平居中，父容器不会被撑爆：

 <div class="container">
    <div class="inner">此子元素宽高固定，flex实现水平居中</div>
    <div class="inner">此子元素宽高固定，flex实现水平垂直居中</div>
    <div class="inner">此子元素宽高固定，flex实现水平垂直居中</div>
  </div>

在这里插入图片描述

<div class="container">
    <div class="inner">此子元素宽高固定，flex实现水平居中</div>
    <div class="inner">此子元素宽高固定，flex实现水平垂直居中</div>
    <div class="inner">此子元素宽高固定，flex实现水平垂直居中</div>
    <div class="inner">此子元素宽高固定，flex实现水平垂直居中</div>
    <div class="inner">此子元素宽高固定，flex实现水平垂直居中</div>
  </div>

在这里插入图片描述
子元素宽高固定，子元素使用margin:0 auto;实现水平居中，或者子元素设置为行内元素，父元素设置text-align:center;都会撑爆父容器。

<div class="container">
    <div class="inner">此子元素宽高固定，实现水平居中</div>
    <div class="inner">此子元素宽高固定，实现水平居中</div>
    <div class="inner">此子元素宽高固定，实现水平居中</div>
    <div class="inner">此子元素宽高固定，实现水平居中</div>
    <div class="inner">此子元素宽高固定，实现水平居中</div>
  </div>

.container {
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    border: 1px solid palevioletred;
    position: relative;
    text-align: center; 
  }
  .inner {
    width: 100px;
    height: 100px;
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    display: inline-block;
    }

在这里插入图片描述

<div class="container">
    <div class="inner">此子元素宽高固定，实现水平居中</div>
    <div class="inner">此子元素宽高固定，实现水平居中</div>
    <div class="inner">此子元素宽高固定，实现水平居中</div>
  </div>

.container {
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    border: 1px solid palevioletred;
    position: relative;
  }
  .inner {
    width: 100px;
    height: 100px;
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    margin: 0 auto;

在这里插入图片描述
二、垂直居中

1、块级元素
使用据对定位设置子元素top:50%;tansform:translateY(-50%)可实现垂直居中。
2、单个行内元素
设置行内元素行高等于父容器高度，即可实现处置居中。例如：

 <div class="container">
    <span class="inner">单行行内元素垂直中</span>
  </div>

.container {
    width: 300px;
    height: 200px;
    }
.inner {
    line-height: 200px;
    }

效果：
在这里插入图片描述
3、多个行内元素
①新增一个和子元素同级的空的行内元素，并设置其高度和父元素等高为100%，font-size:0,vertical-align:middle。设置子元素本身属性为vertical-align:middle; (备注：此方法的使用前提是各个子元素宽度之和小于父元素宽度)例如：

<div class="container">
     <span class="inner">多行行内元素垂直中</span>
      <span class="inner">多行行内元素垂直中</span>
      <span class="inner">多行行内元素垂直居中</span>
      <div class="null-span">123</div>
    </div>

.container {
      width: 500px;
      height: 200px;
      background-color: aquamarine;
      border: 1px solid palevioletred;
      }
      .inner {
      vertical-align: middle;
    }
     .null-span {
      height: 100%;
      display: inline-block;
      vertical-align: middle;
      font-size: 0;
    }

效果：
在这里插入图片描述
② flex布局
设置子元素在交叉轴方向居中。

三、水平垂直居中

1、子元素宽高未知：使用transform方法

   <div class="container">
        <div class="inner">此子元素宽高未知，实现水平垂直居中</div>
   </div>
     .container {
        width: 300px;
        height: 200px;
        background-color: aquamarine;
        border: 1px solid palevioletred;
        position: relative;
      }
     .inner {
        border: 1px solid palevioletred;
        background: pink;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
     }

结果：
在这里插入图片描述
2、子元素宽高固定：使用margin-top和margin-left方法
html结构及父元素样式不变，子元素样式修改为下面这样：

 .inner {
    width: 150px;  
    height: 100px;
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -75px; 
  }

效果：
在这里插入图片描述
3、无论子元素宽高固定或未知，都能使用的布局方式
①flex布局（设置元素在主轴、交叉轴居中即可）
a：子元素宽高固定

 <div class="container">
    <div class="inner">此子元素宽高固定，flex布局实现水平、垂直居中</div>
    <div class="inner">此子元素宽高固定，flex布局实现水平、垂直居中</div>
  </div>

.container {
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    border: 1px solid palevioletred;
    display: flex;
    justify-content: center; 
    align-items: center;
  }
   .inner {
    width: 100px;
    height: 100px;
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    }

效果：
在这里插入图片描述
b：子元素宽高未知

<div class="container">
    <div class="inner">此子元素宽高未知，flex布局实现水平、垂直居中</div>
    <div class="inner">此子元素宽高未知，flex布局实现水平、垂直居中</div>
  </div>

.container {
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    border: 1px solid palevioletred;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
  }
 .inner {
    border: 1px solid palevioletred;
    background: pink;
    text-align: center;
    }

效果：
在这里插入图片描述
四：图片和文字垂直居中

经常有看到设计稿是图片和文字垂直居中的，那么怎么才能让图片和文字垂直居中呢？
只需要给图片一个 vertical-align: middle; 属性，文字所属标签设置为行内元素就可以。如下：

<div class="container">
      <img src="./6666.jpg">
      <p>123456</p>
      }

.container {
      width: 500px;
      height: 500px;
      background-color: aquamarine;
      border: 1px solid palevioletred;
      }
 
img {
      width: 400px;
      height: 300px;
      vertical-align: middle;
    }
    p{
      display: inline-block;
    }

效果：
在这里插入图片描述

ZhaoYLi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS —— 元素水平、垂直、水平垂直居中

一、水平居中1、子元素宽度固定对子元素设置：margin: 0 auto;即可。2、子元素宽度未知①子元素为行内元素：对父元素设置：text-align: center;即可。②子元素是块级元素：a：单个子元素，无需设置，子元素宽度自动铺满整个父容器。b：多个子元素，把子元素设置为行内块级元素inline-block，父容器使用text-align:center。如下：3、...
复制链接

扫一扫