读心悦

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

css关于居中的方式

2021年01月06日 19点热度 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年01月06日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

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

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
canvas flutter JavaScript 阅读 Echarts CSS react 小程序 Nginx node redux taro hook 闲谈 悦读 git vue 随笔 mysql
推荐文章
  1. css关于居中的方式
  2. Flex弹性布局基础属性
  3. 微信小程序中自定义导航和地图定位
  4. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号