div水平居中及div水平垂直居中的方法总结

最新推荐文章于 2024-03-13 10:55:47 发布

star...

最新推荐文章于 2024-03-13 10:55:47 发布

阅读量402

点赞数

分类专栏： html5 前端 css 文章标签：前端 css3 居中

本文链接：https://blog.csdn.net/star0311/article/details/90483348

版权

前端同时被 3 个专栏收录

18 篇文章 2 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

水平居中

1、margin：auto

<div class="wrap">
   <div class="wrap-txt"></div>
</div>

.wrap{
   width: 100%;
}
.wrap-txt{
    width: 6rem;
    height: 2rem;
    background: #00FFFF;
    margin: auto;
}

2、text-align：center
3、absolute+margin偏移

<div class="wrap">
   <div class="wrap-txt"></div>
</div>

.wrap{
   width: 100%;
}
.wrap-txt{
    width: 6rem;
    height: 2rem;
    background: #00FFFF;
    position: absolute;
    left: 50%;
    margin-left: -3rem;
}

4、display：box

<div class="box-pack">文字</div>
.box-pack{
    width: 60px;
    height: 30px;
    display: -webkit-box;
    -webkit-box-pack: center;
    background: #0894ec;
}

5、absolute+transform

垂直居中

1、line-height

<div class="wrap-txt">文字</div>
.wrap-txt{
    width: 6rem;
    height: 2rem;
    line-height: 2rem;
    border: 1px solid transparent;
    box-sizing: border-box;
    background: #00FFFF;
}

2、absolute+margin偏移

<div class="wrap">
   <div class="wrap-txt"></div>
</div>

.wrap{
   width: 100%;
}
.wrap-txt{
    width: 6rem;
    height: 2rem;
    background: #00FFFF;
    position: absolute;
    top: 50%;
    margin-top: -3rem;
}

3、absolute+transform

<div class="parent">
    <div class="child">文字</div>
</div>

.parent{
    position: relative;
    width: 5rem;
    height: 3rem;
    background: #ccc;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

4、table-cell

<div class="table-cell">
    <div class="table-cell-txt">文字</div>
</div>

.table-cell{
    width: 60px;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    background: #ccc;
}

5、绝对定位+四个方向为零+margin：auto（必须设置子元素的宽高，否则子元素的宽高等于父元素的宽高）

<div class="absolute-zero">
    <div class="absolute-zero-txt">文字</div>
</div>

.absolute-zero{
    width: 60px;
    height: 30px;
    background: #f54656;
    position: relative;
}
.absolute-zero-txt{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 20px;
    background: #00FFFF;
    margin: auto;
}

6、css3的flex（存在兼容问题）
7、display：box

<div class="box-align">文字</div>
.box-pack{
    width: 60px;
    height: 30px;
    display: -webkit-box;
    -webkit-box-align: center;
    background: #0894ec;
}