读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

css关于居中的方式

2021年1月6日 89点热度 0人点赞 0条评论

父元素没有固定宽高

水平垂直居中

html:

<div class="wrapper">
        <div class="info">
            垂直居中
        </div>
    </div>

css:

//绝对定位水平垂直居中,方法1
.info {
    position: absolute;
     width: 500px;
     height: 300px;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: green;
}
//方法2
.info {
    position: absolute;
     width:300px;
     height:200px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: green;
}

水平居中

//方法1
.wrapper{
    display: flex;
    justify-content: center;
}
.info {
     width:300px;
     height:200px;
      background-color: green;
}

//方法2
.info {
    width: 300px;
    height: 200px;
    margin: auto;
    background-color: green;
}

不确定子元素宽高

设置水平居中,先将子元素转化为行内元素,即display:inline;或者display:inline-block;,给父元素设置text-align:center;。这是方法一

.wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    text-align: center;
}

.info {
    display: inline;
    margin: 0 auto;
    background-color: green;
}

方法二:使用定位居中

.wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    position: relative;
}

.info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: green;
}

方法三:使用flex在弹性布局

.wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
}

.info {
    //这里可以设置高度
    background-color: green;
}

垂直居中

方法一:

.wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

.info {
    background-color: green;
}

方法二:

.wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    position: relative;
}

.info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: green;
}

如果确定子元素高度,则:

.wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    position: relative;
}

.info {
    height:100px;
    position: absolute;
    top: 50%;
    margin-top:-50px;
    background-color: green;
}

方法三:使用flex(高定不定都可以)

.wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info {
    background-color: green;
}
赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS
最后更新:2021年1月6日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
redux 闲谈 Echarts hook react CSS mysql vue 阅读 node taro git 小程序 Nginx canvas flutter 悦读 JavaScript 随笔
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
useContext()组件状态共享或者传值 JavaScript的== 的隐式类型转换 工厂模式(Factory) 2020年9月2号,怪怪的,我开始写流水文字 JavaScript中 + 隐式类型转换 dart的List类

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号