css水平居中的5种几种方式

2022-07-03 21:34:13 阅读：209 来源： 互联网

标签：居中 center text align 300px 几种 width background css

元素水平居中的第一种方式子元素不需要宽度也可以

<div class="box">
    <div class="son"> 我是内容 </div>
</div>

.box {
    width: 500px;
    height: 300px;
    background: pink;
}
.son {
    width: 300px;
    margin: auto;
    text-align: center;
    background: red;
}

使用的是margin:auto
这样在水平方向上就可以居中了

margin: 100px auto 注意点：

有的小伙伴说:想要上下有一点的间距
可以使用 margin: 100px auto;
但是使用之后，我们发现了一些小的问题。
从上面效果图可以发现：两个盒子同时向下移动。
这种情况并不是我们想要的。
出现是由 margin塌陷导致的

如何解决这种问题呢？
可以将父元素box变为BFC：overflow: hidden; [ 注意不是超出隐藏的作用 ]

position + left:50% + margin-left:-px 第二种子元素需要宽度

<div class="box">
    <div class="son"> 我是内容 </div>
</div>

.box {
    width: 500px;
    height: 300px;
    background: pink;
    position: relative;
}

.son {
    width: 300px;
    background: red;
    position: absolute;
    text-align: center;
    left: 50%;
    /* 当前盒子的一半 */
    margin-left: -150px;
}

注意点 left: 50%和 margin-left的区别

扩展点设置left: 50%;并不能实现水平居中的效果：
它是相对父级元素。【相对于父元素box的宽度】
margin-left它是相对自己的宽度。【相对于自己son的宽度】

定位 position + left+ translateX(-50%) 推荐子元素不要宽度也可以

<div class="box">
    <div class="son"> 我是内容 </div>
</div>

.box {
    width: 500px;
    height: 300px;
    background: aquamarine;
    position: relative;
}

.son {
    width: 300px;
    text-align: center;
    background: pink;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

父text-align:center + 子display:inline-block 子元素不要宽度也可以

 <div class="box">
    <div class="son"> 我是内容 </div>
</div>

.box {
    width: 500px;
    height: 300px;
    background: aquamarine;
    text-align: center;
}

.son {
    width: 300px;
    text-align: center;
    background: pink;
    display: inline-block;
}

注意点：
如果仅使用 text-align:center; 是无法达到水平居中的效果的，为什么？
text-align:center; 需要在行内块元素上使用的，
而盒子是块级元素，所以。
需要将盒子转换为行内块元素 text-align:center; 才能生效。

弹性布局:display:flex; [推荐] 子元素不要宽度也可以

<div class="box">
    <div class="son"> 我是内容 </div>
</div>

.box {
    width: 500px;
    height: 300px;
    background: aquamarine;
    display: flex;
    justify-content: center;
}

.son {
    width: 300px;
    text-align: center;
    background: pink;
}

标签：居中,center,text,align,300px,几种,width,background,css
来源： https://www.cnblogs.com/IwishIcould/p/16440952.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9