写点什么

css 水平垂直居中各种方法实现方式

作者:肥晨
  • 2023-04-16
    江苏
  • 本文字数:1123 字

    阅读完需:约 4 分钟

不定宽高水平垂直居中?

面试题回答方式:


  1. 通过 display:flex;justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中

  2. 也可以父 display:flex;,子设置一个 margin:auto;

  3. 通过 css3,给父元素设置相对定位,给子元素设置绝对定位,left:50% top:50% 通过 transform:translate(-50%,-50%)拉回自身的宽和高的一半。

  4. 通过给父元素设置 display:table-cell; vertical-align:middle text-align:center 给子元素设置 vertical-align:middle text-align:center。就可以让子元素不定宽高水平垂直居中了。

文字在垂直和水平方向重叠的两个属性分别是什么?

垂直方向:line-height。设置成比字体高度还小就可以让两行重叠水平方向:letter-spacing。设置为负值即可实现重叠。

如何居中 div

具体实现方式:

水平居中方法 1

给 div 设置一个宽度,然后添加 margin:0 auto; 属性


div{
width: 200px;
margin: 0 auto;
}
复制代码

水平居中方法 2

利用 text-align:center 实现
.container{
background: rgba(0, 0, 0, .5);
text-align: center:
font-size: 0;
}
.box{
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
复制代码

让绝对定位的 div 居中

div{
positionn: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
复制代码

水平垂直居中方法 1

/* 确定容器的宽高,宽500高300 */
div{
position: absolute;
width:500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
background-color: pink;
}
复制代码

水平垂直居中方法 2

/* 未知容器宽高,利用 transform 属性 */
div{
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
复制代码

水平垂直居中方法 3

/* 利用 flex 布局实际使用时应考虑兼容性 */
.container{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div{
width: 100px;
height: 100px;
background-color: pink;
}
复制代码

为什么 margin: 0 auto 会让 div 居中

margin 可以有 4 个值,分别对应影响的方向是上,右,下,左, 2 个值的时候,对应第一个值是 控制上下距离,第二个值是控制左右, 所以 magrgin:0 auto, 就是上下距离为 0,auto 是自适应,这里指的是左右两个方向的距离一样,也就是说,不论你的宽度怎么变化,都是两个方向距离一样,形成居中。

注意:

要给居中元素一个宽度,否则无效


该元素不可以浮动,否则无效

发布于: 刚刚阅读数: 4
用户头像

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台:InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者 领域:前端 公众号:农民工前端

评论

发布
暂无评论
css水平垂直居中各种方法实现方式_三周年连更_肥晨_InfoQ写作社区