为了账号安全,请及时绑定邮箱和手机立即绑定

学习CSS布局-垂直水平居中

2019.01.02 15:12 1062浏览

学习大纲

  • 水平居中
  • 垂直水平居中

水平居中


<div class="parent">
    <p class="child">水平居中</p>
</div>

方法一

  • 优点:兼容性好,甚至可以兼容ie6、ie7
  • 缺点:child里的文字也会水平居中,可以在.child添加text-align:left;还原
.parent {
    text-align: center;
}

.child {
    display: inline-block;
}

方法二

  • 优点:只设置了child,ie8以上都支持
  • 缺点:ie6、ie7不支持将div换成table
.parent {
}

.child {
    display: table;
    margin: 0 auto;
}

方法三

  • 优点:居中元素不会对其他的产生影响
  • 缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

方法四

  • 优点: 简单快捷
  • 缺点: 低版本浏览器(ie6 ie7 ie8)不支持
.parent {
    display: flex;
}

.child {
    margin: 0 auto;
}

方法五

  • 优点:简单快,设置parent即可
  • 缺点:低版本浏览器(ie6 ie7 ie8)不支持
.parent {
    display: flex;
    justify-content: center;
}

.child {
}

方法六

  • 使用grid网格布局
.parent {
    /*核心代码*/
    display: grid;
}

.child {
    justify-self: center;
}

水平垂直居中


<div class="parent">
    <p class="child">child</p>
</div>

方法一

  • absolute + 负margin值
  • 父元素设置相对定位,子元素设置绝对定位,margin值设置为负数
  • 注意:子元素需要定宽高
 .parent {
    /*核心代码*/
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;

    width: 100px;
    height: 100px;
    background: #f00;
}

方法二:

  • absolute + margin auto
  • 父元素设置相对定位,子元素设置绝对定位,margin值设置auto,四个方向设置为0
  • 注意:子元素需要定宽高
.parent {
    /*核心代码*/
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    
    width: 100px;
    height: 100px;
    background: #f00;
}

方法三:

  • absolute + calc
  • 父元素设置为相对定位,父元素设置绝对定位,使用ralc
  • 注意:子元素需要定宽高
  .parent {
    /*核心代码*/
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

    width: 100px;
    height: 100px;
    background: #f00;
}

方法四

  • absolute + transform
  • 父元素设置为相对定位,父元素设置绝对定位,使用transform
  • 注意:子元素不需要定宽高
 .parent {
    /*核心代码*/
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    background: #f00;
}

方法五

  • writing-mode
  • 使用writing-mode垂直水平居中
  • 子元素(.item)不需要定宽高

<div class="parent">
    <ul class="child"><li class="item">item</li>
    </ul></div>
/* css */
.parent {
    /*核心代码*/
    writing-mode: vertical-lr;
    text-align: center;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.item {
    /*核心代码*/
    display: inline-block;
    margin: auto;
    text-align: left;
    background: #f00;
}

方法六

  • line-height
  • 父元素定好宽高,使用line-height水平对齐
  • 子元素可以不设置宽高
.parent {
    /*核心代码*/
    width: 200px;
    line-height: 200px;
    text-align: center;
    
    border: 1px solid #f00;
}

.child {
}

方法七

  • table
  • 父元素设置table-cell
  • 子元素可以不用设置宽高
.parent {
    /*核心代码*/
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    display: inline-block;

    background: #f00;
}

方法八

  • 使用flex
  • 子元素可以不用设置宽高
.parent {
    /*核心代码*/
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    background: #f00;
}

方法九

  • 使用grid网格布局
  • 子元素可以不用设置宽高
.parent {
    /*核心代码*/
    display: grid;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    /*核心代码*/
    align-self: center;
    justify-self: center;
    
    background: #f00;
}
点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

10人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消