原博客链接： www.jianshu.com/p/f4b9d1e2c…
css 实现水平居中，垂直居中，水平垂直居中，是css 入门的必修课题，也是代码实践,笔试面试中经常遇到的场景。这次的内容主要围绕着几种场景下的，多种水平居中方法的实现
实现场景：蓝色方块需要在父元素内部水平居中
1. 居中元素为块级元素
基础代码
<div class="container">
<div class="box">牛</div>
</div>
复制代码.container{
width: 100px;
border:1px solid red;
height: 100px;
}
.container .box{
font-size: 20px;
line-height: 50px;
background-color: blue;
color: white;
}
复制代码块级元素的特点：可设置元素的宽度，在不设置宽度时， 元素的宽度会自动填满其父元素宽度，并独占一行
1.1 margin: auto
居中元素设置宽度，并且设置 margin: auto 可实现水平居中
.container .box{
height: 50px;
width: 50px; /* 设置宽度 */
margin: 0 auto; /* 设置宽度 */
}
复制代码问题： margin: auto 实现水平居中的前提是， 元素的宽度已知，当宽度值未知时，见2.2
2. 居中元素为行内元素
基础代码
<div class="container">
<span class="box">牛</span>
</div>
复制代码.container{
width: 100px;
border:1px solid red;
height: 100px;
}
.container .box{
font-size: 20px;
background-color: blue;
color: white;
}
复制代码行内元素的特点： 行内元素的宽度为元素自身撑起的宽度，和其他元素在同一行，高度，宽度，内边距等都是不可控的，即设置padding-left, padding-right, margin-left, margin-right, height, width 都无法生效
2.1 text-align: center
利用行内元素的特点，设置 text-align：center 使元素居中
.container{
text-align: center;
}
复制代码2.2 display：inline-block 改变模型
利用 行内元素设置 text-align 实现水平居中的方法，可以针对居中元素为块级元素，但宽度不确定时 （即1.1 问题)的场景
<div class="container">
<div class="box">牛</div>
</div>
复制代码.container{
text-align: center;
}
.container .box{
display: inline-block;
*display: inline; /*兼容性代码*/
*zoom: 1; /*兼容代码*/
}
复制代码问题: 需要解决 display: inline-block 在IE 下的兼容性问题
3. 利用定位实现水平居中(已知宽度)
相对定位： 相对定位就是将元素偏离元素的默认位置，但是并没有脱离文档流，只是视觉上发生的偏移，不会改变元素的display 属性
绝对定位： 相对于设置了 相对定位的上层元素或者顶级元素的相对位置，无论设置的元素为块级元素还是行内元素，position 设置成absolute 之后 ， 元素display 表现为 block， 元素脱离文档流，父元素无法知道该元素的高度
因此，从以上的定义我们可以得到一种新的水平居中的方式，父级元素设为相对定位，居中元素设置为绝对定位，设置居中元素的宽度，并相对于父元素设置位置
.container{
position: relative;
}
.container .box{
position: absolute;
width: 50px; /*设置宽度*/
left: 50%; /*左移50%*/
margin-left: -25px; /*修正位置*/
}
复制代码缺点： 缺点是需要知道元素的宽度
4 利用定位，translate 实现水平居中(未知宽度)
对于已知元素的宽度，我们可以使用3中的 margin-left: -25px; /*修正位置*/ 进行精确的定位，而对于不知道宽度的元素，我们可以使用 translate 来精准定位，只需要将 margin-left: -25px; /*修正位置*/ 替换成 transform: translate(-50%, 0) 即可
.container .box{
font-size: 20px;
background-color: blue;
color: white;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 50px;
}
复制代码5. flex 布局实现
Flex是Flexible Box的缩写，意为”弹性布局”，父元素设置成flex 布局，可以将子元素设置为水平居中， （但是flex布局部分浏览器无法使用）
.container{
display: flex;
justify-content: center
}
复制代码6. tabel-cell布局
实际项目中并不常见，故暂不提及。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/101414.html原文链接：https://javaforall.net
